Skip to main content

Datetime Picker Widget

The IQNOX Datetime Picker widget is a an optimized replacement for the Thingworx Date Time Picker. It is based on the Air Datepicker library.



PropertyTypeBindingDefault value
TemplateLIST<Template 1The widget template to use for this widget.
CustomClassSTRING<>Enables you to define an HTML class to the top div of the widget. Multiple classes can be separated by a space.
LabelSTRING(localized)<Text to be used for the label of the picker.
SecondaryLabelSTRING(localized)<Text that is displayed after label usually to mark a mandatory field.
ShowSecondaryLabelBOOLEAN<TRUEFlag property which decides whether or not to show the Secondary Label.
WidthINTEGER200Width of the widget.
HeightINTEGER40Height of the widget.
PlaceholderSTRING(localized)<Text to be used for the placeholder of the picker.
TabSequenceINTEGER0Specifies the tab order of an element (when the "tab" button is used for navigating).
ShowHelpIconBOOLEAN<FALSEWill enable a customizable icon on the right of the label, the icon will show the tooltip on hover for more documentation
HelpIconSTRING<Icon to be displayed on the right of the label when ShowHelpIcon is enabled.
DisabledBOOLEAN<FALSEDisables the picker so it can't be clicked.
InvalidBOOLEAN<>FALSEUsed to force widget into invalid state or to transmit state.
TooltipSTRING(localized)<Optional tooltip used to display additional information. This tooltip can be styled globally from GlobalStyles.
TooltipTypeLIST<TextThe widget tooltip type
TooltipMashupMASHUPNAME<Mashup to be used as a tooltip when TooltipType is set as Mashup
TooltipWidthNUMBERWidth of the tooltip. It won't be bigger than the Max-width set in the GlobalStyles for the Tooltip
TooltipHeightNUMBERHeight of the tooltip. Can only be set if TooltipType is set as HTML, Markdown or Mashup
IconURISTRING<material-outlined:date_rangeURI describing the icon. Either a HTTP link or a reference to an icon in an icon font can be used.
DateTimeFormatSTRING(localized)<YYYY/MM/DDFormat date using Format Complex. SimpleDateFormat rules are accepted, along with prefixes and suffixes.
DateRangeBOOLEANFALSEAllows the user to select a date range.
CloseOnSelectBOOLEANFALSEBy default confirmation of selection should be by clicking outside the popover. If this is true, it will close after the user has selected a date or a date range.
ShowTimeBOOLEAN<FALSEAllows the user to also select time in popover.
TimePickerOnlyBOOLEANFALSEThe user will only be prompted in the popover with a time selector.
MinuteStep(1)STRING5A list of how many steps for minutes select.
DateTimeDATETIME<>Date and Time of the picker.
StartDateTimeDATETIME<>Start Date and Time of the picker when picker is range.
EndDateTimeDATETIME<>End Date and Time of the picker when picker is range.
MinDateDATETIME<>Restrict the user to select only a date after.
MaxDateDATETIME<>Restrict the user to select only a date before.
FirstDaySTRING0Whether the calendar should have weeks starting Monday(0) or Sunday(1).
DateRangeSeparatorSTRING-Separator between multiple dates.
ViewSTRINGdaysThe select picker will show first to select days, months or years.
MinViewSTRINGdaysThe picker will allow selection of only Day, Month or Year
ShowClearButtonBOOLEANFALSEAdd a Clear button to the datepicker that will remove the selected dates when clicked.
AllowClearBOOLEANTRUEAllow datepicker to be cleared.
AllowManualInputBOOLEANTRUEMake the input editable, on blur/enter.


ResetValueSERVICE<Resets the Value of the widget to default.
BlurSERVICE<Removes the focus from the element.
FocusSERVICE<Forces the focus on the widget, allowing it to receive keyboard inputs.
ShowCalendarSERVICE<Will show calendar popover of picker.


DateChangedEVENT>Triggers an event when date is changed.
RangeChangedEVENT>Triggers an event when date range is changed.

(1)MinuteStep Options :

  • '1' — 1 minute time step
  • '5' — 5 minutes time step
  • '15' — 15 minutes time step