Mashup Builder > Widgets > Standard Widgets > Date Time Picker Widget (Themable)
Date Time Picker Widget (Themable)
The Date Time Picker widget enables you to set a date and time in the mashup.
* 
The Date Time Picker is available as a standard widget in the platform and as a web component that can be imported from an SDK.
The properties of the Date Time Picker widget are listed below.
Property Name
Description
Base Type
Default Value
Bindable? (Y/N)
Localizable? (Y/N)
Label
The text that is displayed in the label of the Date Time Picker widget.
STRING
n/a
Y
Y
Disabled
Use this property to disable the widget in the mashup. The widget is displayed in the mashup but you cannot click it.
BOOLEAN
False
Y
N
HintText
Displays placeholder text that explains what should be entered in the field.
STRING
Select Date & Time
Y
Y
DateOnly
Enables you to display only the date.
BOOLEAN
True
N
N
DisplaySeconds
Enables you to display the time with seconds.
BOOLEAN
False
N
N
DateDelimiter
Allows you to set one character to separate the day, month, and year. For example, a — (hyphen) or / (slash) as in 05/10/2020.
* 
Do not use \ (backslash) as a delimiter because the date order appears incorrectly at the runtime.
STRING
n/a
N
Y
MonthFormat
Enables you to display the month in either full, short , or numeric format.
STRING
Full
N
N
PrimaryActionPosition
Enables you to set the position of the primary action button to the Left or Right.
The primary action is the Done button in the button group.
STRING
Left
N
N
DateOrder
Enables you to set the format of the date display. The different formats are Auto, Day-Month-Year, Month-Day-Year and Year-Month-Day.
When the default Auto is selected, the system date appears in the widget. Also, the DateDelimiter and MonthFormat properties are disabled by the widget.
STRING
Auto
N
N
DateRange
Allows you to set a date range when you select this property.
When you select this property, the following StartDate, StartDateLabel, EndDate, EndDateLabel, and RangeHintText properties appear.
When you select this property, the following CurrentDateButton and DateTime properties do not appear in the property list.
BOOLEAN
False
N
N
StartDate
This property sets the value of the start date for the date range. The value must be smaller than or equal to the EndDate value.
DATETIME
n/a
Y
N
StartDateLabel
Specifies the label that is displayed for the StartDate field.
The drop down has a list of labels that you can choose from.
STRING
startRangeDate
Y
Y
EndDate
This property sets the value of the end date for the date range. The value must be larger than or equal to the StartDate value.
DATETIME
n/a
Y
N
EndDateLabel
Specifies the label that is displayed for the EndDate field.
The drop down has a list of labels that you can choose from.
STRING
endRangeDate
Y
Y
RangeHintText
Specifies the hint text that is displayed in the StartDate and EndDate fields.
STRING
selectDate
Y
Y
FormatToken
Localizes the date and time format using dd-mm-yy patterns that are supported by the Moment.js library. This property overrides the DisplaySeconds, DateOnly, DateDelimiter, MonthFormat and DateOrder properties.
For more information about the supported date and time patterns, see Formatting Date and Time for Widgets.
STRING
n/a
N
Y
IntervalType
Enables you to set an interval type as Hours, Minutes, Seconds, or Days.
This property is available only when you select the InitializeWithCurrentDateTime property. For example, when you set an interval type from the dropdown list as Days and enter an integer value 1 in the Interval property field, the widget picks tomorrow’s date.
STRING
Hours
N
N
Interval
Enables you to set an initial interval.
This property is available only when you select the InitializeWithCurrentDateTime property.
NUMBER
n/a
N
N
CustomClass
Enables you to define the CSS to the top div of the widget. Multiple classes can be entered, separated by space.
STRING
n/a
Y
N
TabSequence
The sequence of the widgets in which they are highlighted when the user presses Tab key.
NUMBER
n/a
N
N
WeeklyCalendarStart
Enables you to set the weekly calendar to start on Sunday or Monday.
STRING
Monday
N
N
InitializeWithCurrentDateTime
Enables you to set the DateTime property with current date and time. If this property is not selected, you must enter the date and time.
BOOLEAN
True
N
N
LabelAlignment
Enables you to align the label to the left, right or center on the widget.
STRING
Left
N
N
CurrentDateButton
Adds a button that allows you to select the current date.
BOOLEAN
True
N
N
DateTime
Source for date and time value of the date time picker.
DATETIME
n/a
Y
N
Changed
A bindable event that is triggered when the data for this widget is modified.
* 
In ThingWorx 9.2 or later, this event is not available when the range selection is enabled.
n/a
n/a
Y
N
RangeChanged
A bindable event that is triggered when the selected date range is changed.
* 
This event is available in ThingWorx 9.2 or later.
n/a
n/a
Y
N
ResetToDefaultValue
Resets the inputs for this widget to its default values.
n/a
n/a
Y
N
Width
The width of the widget.
NUMBER
n/a
N
N
Height
The height of the widget. The height is set to the maximum width of the label by default. It increases if the widget has multiline label. Enter a value in the property panel or resize the widget in the canvas to set a fixed height.
NUMBER
n/a
N
N
TooltipField
Sets a tooltip text that is displayed when you hover over the widget.
STRING
n/a
Y
Y
TooltipIcon
Sets an icon image for the tooltip of the widget.
You can add an image or specify an image URL path.
MEDIA ENTITY
n/a
N
N
Was this helpful?