Edit this page

DateInput Overview

The Kendo UI DateInput widget allows users to enter date and time through direct input.

The DateInput provides separate sections for days, months, years, hours, and minutes. DateInput also supports customizing the date and time formats.

Getting Started

Initialize the DateInput

To initialize the DateInput, use the following example.

<input id="dateInput" />

<script>
    $(document).ready(function(){
        $("#dateInput").kendoDateInput();
    });
</script>

Configuration

The DateInput provides configuration options that can be set during initialization. The available properties are:

  • Selected date
  • Format definition
  • Enabled and read-only state

Selected date, Format

The following example demonstrates how to create a non-editable DateInput with a selected date. The date is displayed in a predefined format.

Example
<input id="dateInput" />

<script>
    $(document).ready(function(){
        $("#dateInput").kendoDateInput({
            value: new Date(),
            format: "dd/MM/yyyy",
            readonly: true
        })
    });
</script>

Validation

The input in each section of the component is always valid for the relevant section. For example, you cannot enter 23 in the month section. As a result, the value in DateInput is always a valid date.

Integration with Other Editor Widgets

You can integrate the DateInput with:

  • DatePickers
  • DateTimePickers
  • TimePickers

The following example demonstrates how to integrate the DateInput with the DatePicker by enabling the dateInput property of the DatePicker.

Example
<input id="datepicker" />

<script>
$("#datepicker").kendoDatePicker({
    dateInput: true
});
</script>

Localization

The DateInput enables you to modify the text that is displayed in the placeholders based on your requirements.

Example
<input id="dateinput" />

<script>
$("#dateinput").kendoDateInput({
    format: "dd / MMMM / yyyy",
    messages:{
        month:"____",
        year:"____",
        day:"__",
        }
});
</script>

See Also

Other articles on the Kendo UI DateInput:

Articles on the Kendo UI Calendar:

Articles on the Kendo UI DatePicker:

Articles on the Kendo UI TimePicker:

Articles on the Kendo UI DateTimePicker:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy