Skip to main content

Datetime Picker Widget

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

Usage

Properties

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. See Tooltip
TooltipAnchorSTRINGWidgetIf the tooltip should appear next to the Widget, or next to the cursor.
TooltipFormatSTRING(localized)<see Format Complex
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.
MinuteStep1STRING5A 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.
ViewSTRING<daysThe select picker will show first to select Days, Months or Years. If value comes from a binding they should come as days, months or years.
MinViewSTRING<daysThe picker will allow selection of only Day, Month or Year. If value comes from a binding they should come as days, months or years.
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.

Services

PropertyTypeBindingDescription
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.

Events

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

Footnotes

  1. MinuteStep Options:

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