Wijmo JavaScript Framework

InputDateTime, InputDate, InputTime for JavaScript

Simplify entering date and time-related information with Wijmo's Date Input controls, which include control customization and date and time formatting. Wijmo's Input controls are designed and optimized for both mouse and touch and work smoothly on any device.

InputDate

The InputDate component allows users to enter and edit dates. It has the following advantages over regular input elements:

  1. Users cannot enter non-numeric values at all.
  2. You can use the format property to format the number as it is edited, making it easy to read.
  3. You can use the min and max properties to specify the valid range of values (users will not be able to enter values outside this range).
  4. You can use the step property to specify an increment that is added to the value when the user clicks the increment/decrement buttons on the component.

Try the InputDate Demo

InputDateTime

The InputDateTime component unifies InputDate and InputTime into a single component, saving some screen real-estate in scenarios where you do want to edit the date and time parts of a Date object.

Try the InputDateTime Demo

InputTime

The InputTime component extends the ComboBox class to allow easy entry and editing of time values.

Try the InputTime Demo

Customization

You can customize the appearance of the InputDate and its drop-down calendar using CSS. You can also use the calendar's formatItem event to customize the appearance of specific dates in the drop-down calendar.

Try the InputDate Customization Demo

Formatting

Use the InputDate's format property to format and parse date values to suit your app. The syntax of the format parameter is similar to the one used in .NET.

Try the InputDate Formatting Demo

Ranges

Use the InputDate's min and max properties to restrict the range of dates that can be entered.

Try the InputDate Ranges Demo

Validation

The InputDate component prevents users from selecting values outside the range determined by the min and max properties.

Try the InputDate Validation Demo