Wijmo includes four controls for date and time input: InputDate, InputTime, InputDateTime, and Calendar.
The InputDate and InputTime controls allow users to type or select dates and times. The InputDateTime combines these two controls so users can change both the date and time portions of JavaScript Date objects. Finally, the Calendar control displays month and year views and allows users to select specific dates using the mouse, keyboard, or touch.
These samples use the WjInputDate, WjInputTime, WjInputDateTime, and WjCalendar directives and AngularJS.
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.
The InputTime control allows users to type times using any format supported by the Globalize class, , 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.
The InputDateTime control combines the InputDate and InputTime controls, allowing users to edit both the date and time portions of JavaScript Date objects using a single control. In some cases, this can be more convenient than using two separate controls (an InputDate and an InputTime) bound to the same Date object.
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.