Overview

The Teams Time Picker is a custom Mendix web widget that provides a flexible and intelligent time selection experience.

It supports two linked time fields, configurable dropdown intervals, automatic time calculations, and manual user input with smart suggestions.

Documentation

Introduction:

Teams Time Picker simplify time selection scenarios where two related time values are required, such as start and end times. The widget operates in two modes—First Time and Second Time—controlled by an enumeration property. When used as the First Time picker, the component allows the user to either select a time from a configurable dropdown or manually type any valid time. Once a valid time is entered, the widget automatically calculates and sets the Second Time by adding a predefined time difference, ensuring consistency and reducing user effort. The dropdown values are dynamically generated based on a configurable interval, and while typing, the list is intelligently filtered to provide quick suggestions. When used as the Second Time picker, the widget simply updates the bound attribute without affecting the First Time. Throughout the process, Mendix on-change events are triggered appropriately, validation feedback is shown when required, and all values are stored directly in Mendix DateTime attributes, making the component reliable, user-friendly, and easy to integrate into business workflows.

This widget is ideal for scenarios such as:

1.Start Time / End Time selection

2.Meeting scheduling

3.Shift planning

4.Time-slot based workflows

5.The widget is fully configurable from Studio Pro and supports validations and on-change events.

Features:

Dual Time Mode (First / Second):

Widget can act as either First Time or Second Time

Controlled via an enumeration property

Ensures clean separation of logic

Configurable Dropdown Interval:

Dropdown values are generated dynamically[ D/B DropdownValue (in minutes)]

Interval controlled by [D/B Time 1 and 2]

Example:

30 → 12:00 AM, 12:30 AM, 1:00 AM…

15 → 12:00 AM, 12:15 AM, 12:30 AM…

Automatic Time Difference Calculation

When First Time is selected:

Second Time is auto-calculated

Controlled by Different (in minutes)

Example:

First Time: 12:00 AM

Different: 90

Second Time auto-set to 1:30 AM

Manual Time Entry Supported

Users can type any valid time, such as:

1.1:43 AM

2.09:07 PM

Typed values are validated and accepted

No restriction to dropdown values only

Smart Dropdown Suggestions

Dropdown filters dynamically as user types

Acts like an autocomplete

Improves usability for large intervals

Validation Support:

Optional validation handling

Red border + message if validation fails

Controlled via Mendix Boolean attribute[if this boonlean is true then validation will show]