The following topic contains information about the widget in ThingWorx 9.3.3 or later. If you are using an earlier version of ThingWorx, see Date Time Picker Widget.

You can use the Date Time Picker widget to allow users to select a single date or time; or a range in a mashups. At run time, the widget is displayed in a collapsed state. Clicking the calendar icon opens a calendar view that displays selection drop-down lists in addition to the days for each month. The calendar drop-down lists are combination boxes that support keyboard input. You can type a value to select an item more quickly. The calendar button opens a pop-up calendar that enables you to select dates interactively. Different controls are displayed on the calendar based on the date picker configuration. You can configure the widget in the following ways:

Date selections are only saved when the Select button is clicked, and are not saved when an area outside the widget is clicked or when the ESCAPE key is pressed.

Additional selection boxes are added to the widget, depending on the configured date selection. The following table lists available options:

When selecting a range, the first selection is used as the start of the range. However, dates are automatically switched to keep a valid range when the second date selection is earlier than the first date. In addition, clicking a new date clears the existing range and initiates the selection of a new range.

You can restrict the date range that is available for selection on the calendar in one of three ways:

By default, the date-time picker allows you to select dates. Enabling time selection lets users select specific time or a time range in addition to dates on the calendar. To add time selection to the widget, set the widget DateOnly property to false. By default, time selection is configured for hours and minutes. You can let users select seconds by setting the DisplaySeconds property to true. The following image shows the widget with time selection that includes seconds.

By default, the widget displays all dates. You can use the MaxRange property to restrict the date selection to a specific range. For example, to set the possible range to 20 days. Set the DateRange property to true and the MaxRange property on the Validation panel to 20.

The following image shows a selected range value and dates that are out of range. The range is calculated at run time after the user selects an initial start or end date. MaxRangeis within the Minimum and maximum start and end dates .On selection, dates outside the set value are then disabled; see example number 3 in the image.

Time is displayed using a 24–hour format by default. To display the time using a 12–hour format, set the widget TwelveHourClock property to true. An additional drop-down list is displayed for AM or PM selection.

Use the Interval property to offset the default selected value relative to the current date or time when the widget is displayed at run time. You can offset the selected value forwards or backwards by days, hours, minutes, or seconds using the IntervalType property. For example, to advance the selected time on the date picker widget by 30 minutes, set the IntervalType property to Minutes and the Interval property to 30.

By default, the date order is automatically set according to the locale of the user viewing the mashup. For example, in some geographies, dates are displayed using Day-Month-Year format while others use Month-Day-Year. You can manually set the order for all users using the widget DateOrder property. When you apply a specific order, MonthFormat and DateDelimiter are added to the list of properties.

You can set the date format by configuring the widget FormatToken property based on the MomentJS library syntax. For more information about the formatting options for dates, see Formatting Date and Time for Widgets.

By default, the widget displays a string of characters that indicate the date or time format that are supported by the widget. Using the combination box allows users to type a widget value more quickly, without opening the calendar. You can disable input masks by setting the DisableMaskedInput property to true. The following image shows a date update where an input masks is displayed.

In addition to the common properties, you can use MaxDate and MinDate properties to restrict the available date range in the widget. When a date outside of the range is selected, a failure message is displayed.

To configure the default failure messages, use the MinDateFailureMessage and MaxDateFailureMessage properties or the MaxRangeFailureMessage property.

For more information about the common validation properties, see Applying Validation to Widgets.