InputDateTime, InputDate, InputTime for JavaScript

InputDate

The InputDate control 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 control.

Try the demo

InputDateTime

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

InputTime

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

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 demo

Ranges

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

Try the 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 demo

Validation

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

Try the demo