InputDate, InputTime, and Calendar controls

Wijmo includes three controls for date and time input: InputDate, InputTime, and Calendar.

The InputDate control allows users to type dates using any format supported by the Globalize class, or to pick dates from a drop-down that shows a Calendar control. The appearance and behavior of the control are similar to what Chrome provides for input elements of type date. The min and max properties allow you to restrict the range of values that the user can enter. The value property gets or sets a Date object that represents the date selected by the user, and the format property specifies the .NET-style format string.

These samples use the WjInputDate, WjInputTime, and WjCalendar Angular 2 components.

The InputTime control allows users to type times using any format supported by globalize.js, or to pick times from a drop-down that shows a list of times. The min, max, and step properties determine the values shown in the list. The value property gets or sets a Date object that represents the time selected by the user, and the format property specifies the .NET-style format string.

Finally, the Calendar control displays a whole month and allows users to select a date using the keyboard or pointing device. It is used in the drop-down portion of the InputDate control but can also be used in stand-alone mode. The Calendar shows one month at a time, and allows the user to select a date or to navigate to other months and years.

The InputDate and Calendar controls only modify the date portion of the value property (the time of day is preserved). Similarly, the InputTime control only changes the time portion (the date is preserved). This allows you to bind the controls to a single Date object and edit the date and time parts of the Date object independently. The example below shows how this works. All controls are bound to a single 'departureDate' property in the controller, and you can modify the date and time portions independently.

English German Italian French Portuguese Russian Japanese Korean

Description
Control
Bound value
InputDate
between 2010 and 2016
{{departureDate | glbz:'f'}}
InputDate, custom style
between 2010 and 2016
{{departureDate | glbz:'f'}}
Calendar
between Jan 15 and Jun 15, 2014
{{departureDate | glbz:'f'}}
InputTime
between 7am and 10pm
{{departureDate | glbz:'f'}}
InputTime, Custom Style
15 minute step
between 7am and 10pm
{{departureDate | glbz:'f'}}