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 #

Property	Type	Binding	Default value
Template	LIST	<	Template 1	The widget Template to use for this widget.
CustomClass	STRING	<>		Enables you to define an HTML class to the top div of the widget. Multiple classes can be separated by a space.
Label	STRING(localized)	<		Text to be used for the label of the picker.
SecondaryLabel	STRING(localized)	<		Text that is displayed after label usually to mark a mandatory field.
ShowSecondaryLabel	BOOLEAN	<	TRUE	Flag property which decides whether or not to show the Secondary Label.
Width	INTEGER		200	Width of the widget.
Height	INTEGER		40	Height of the widget.
Placeholder	STRING(localized)	<		Text to be used for the placeholder of the picker.
TabSequence	INTEGER		0	Specifies the tab order of an element (when the “tab” button is used for navigating).
ShowHelpIcon	BOOLEAN	<	FALSE	Will enable a customizable icon on the right of the label, the icon will show the tooltip on hover for more documentation
HelpIcon	STRING	<		Icon to be displayed on the right of the label when ShowHelpIcon is enabled.
Disabled	BOOLEAN	<	FALSE	Disables the picker so it can’t be clicked.
Invalid	BOOLEAN	<>	FALSE	Used to force widget into invalid state or to transmit state.
Tooltip	STRING(localized)	<		Optional tooltip used to display additional information. See Tooltip
TooltipAnchor	STRING		Widget	If the tooltip should appear next to the Widget, or next to the cursor.
TooltipFormat	STRING(localized)	<		see Format Complex
TooltipType	LIST	<	Text	The widget tooltip type
TooltipMashup	MASHUPNAME	<		Mashup to be used as a tooltip when TooltipType is set as Mashup
TooltipWidth	NUMBER			Width of the tooltip. It won’t be bigger than the Max-width set in the GlobalStyles for the Tooltip
TooltipHeight	NUMBER			Height of the tooltip. Can only be set if TooltipType is set as HTML, Markdown or Mashup
IconURI	STRING	<	material-outlined:date_range	URI describing the icon. Either a HTTP link or a reference to an icon in an icon font can be used.
DateTimeFormat	STRING(localized)	<	YYYY/MM/DD	Format date using Format Complex. SimpleDateFormat rules are accepted, along with prefixes and suffixes.
DateRange	BOOLEAN		FALSE	Allows the user to select a date range.
CloseOnSelect	BOOLEAN		FALSE	By 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.
ShowTime	BOOLEAN	<	FALSE	Allows the user to also select time in popover.
TimePickerOnly	BOOLEAN		FALSE	The user will only be prompted in the popover with a time selector.
MinuteStep1	STRING		5	A list of how many steps for minutes select.
DateTime	DATETIME	<>		Date and Time of the picker.
StartDateTime	DATETIME	<>		Start Date and Time of the picker when picker is range.
EndDateTime	DATETIME	<>		End Date and Time of the picker when picker is range.
MinDate	DATETIME	<>		Restrict the user to select only a date after.
MaxDate	DATETIME	<>		Restrict the user to select only a date before.
FirstDay	STRING		0	Whether the calendar should have weeks starting Monday(0) or Sunday(1).
DateRangeSeparator	STRING		-	Separator between multiple dates.
View	STRING	<	days	The 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.
MinView	STRING	<	days	The picker will allow selection of only Day, Month or Year. If value comes from a binding they should come as days, months or years.
ShowClearButton	BOOLEAN		FALSE	Add a Clear button to the datepicker that will remove the selected dates when clicked.
AllowClear	BOOLEAN		TRUE	Allow datepicker to be cleared.
AllowManualInput	BOOLEAN		TRUE	Make the input editable, on blur/enter.

Services #

Property	Type	Binding	Description
ResetValue	SERVICE	<	Resets the Value of the widget to default.
Blur	SERVICE	<	Removes the focus from the element.
Focus	SERVICE	<	Forces the focus on the widget, allowing it to receive keyboard inputs.
ShowCalendar	SERVICE	<	Will show calendar popover of picker.

Events #

Property	Type	Binding	Description
DateChanged	EVENT	>	Triggers an event when date is changed.
RangeChanged	EVENT	>	Triggers an event when date range is changed.

Notes: #