The DateTimePicker component alows users to select both date (day, month and year) and time (hours, minutes and seconds)
and for the purpose it consists of input field and Date/Time picker.
Use the DateTimePicker if you need a combined date and time input component.
Don't use it if you want to use either date, or time value.
In this case, use the DatePicker or the TimePicker components instead.
The user can set date/time by:
using the calendar and the time selectors
typing in the input field
Programmatically, to set date/time for the DateTimePicker, use the value property
Example: the following format dd/MM/yyyy, hh:mm:ss aa
corresponds the 13/04/2020, 03:16:16 AM value.
The small 'h' defines "12" hours format and the "aa" symbols - "AM/PM" time periods.
Example: the following format dd/MM/yyyy, HH:mm:ss
corresponds the 13/04/2020, 15:16:16 value.
The capital 'H' indicates "24" hours format.
Note: If the formatPattern does NOT include time,
the DateTimePicker will fallback to the default time format according to the locale.
Note: If no placeholder is set to the DateTimePicker,
the current formatPattern is displayed as a placeholder.
If another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.
Note: If the user input does NOT match the formatPattern,
the DateTimePicker makes an attempt to parse it based on the
locale settings.
The DateTimePicker is responsive and fully adapts to all devices.
For larger screens, such as tablet or desktop, it is displayed as a popover, while
on phone devices, it is displayed full screen.
Defines how to calculate calendar weeks and first day of the week. If not set, the calendar will be displayed according to the currently set global configuration.
Currently selected date represented as a Local JavaScript Date instance. Note: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.
Defines the visibility of the week numbers column. Note: For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.
Determines the maximum date available for selection. Note: If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).
Determines the minimum date available for selection. Note: If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).
Determines the name by which the component will be identified upon submission in an HTML form. Note: This property is only applicable within the context of an HTML Form element.
Defines a short hint, intended to aid the user with data entry when the component has no value. Note: When no placeholder is set, the format pattern is displayed as a placeholder. Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
Defines the value state message that will be displayed as pop up under the component. Note: If not specified, a default text (in the respective language) will be displayed. Note: The valueStateMessage would be displayed, when the component is in Information, Critical or Negative value state.
Fired before the value state of the component is updated internally. The event is preventable, meaning that if it's default action is prevented, the component will not update the value state.
You can have custom formatting for the display value and the value property.
Supported format options are pattern-based on Unicode LDML Date Format notation.
For more information, see UTS #35: Unicode Locale Data Markup Language.