New to Kendo UI for jQuery? Download free 30-day trial

Getting Started with the DatePicker

This guide demonstrates how to get up and running with the Kendo UI for jQuery DatePicker.

After the completion of this guide, you will be able to achieve the following end result:

    <input id="datePicker" />

    <script>    
        $("#datePicker").kendoDatePicker({        
            value: new Date(2022, 0, 3),
            min: new Date(2022, 0, 1),
            max: new Date(2022, 5, 30),
            weekNumber: true,
            format: "yyyy-MM-dd"
        });
    </script>

1. Create a select Element

First, create an <input> element on the page from which the DatePicker widget will be initialized.

Note that the DatePicker copies any styles and CSS classes from the input element to the wrapper element and visible input. Also, the first day of the week in the DatePicker calendar depends on the applied culture.

<input id="datePicker" />

2. Initialize the DatePicker

In this step, you will initialize the DatePicker from the <input> element. When you initialize the widget, all settings of the DatePicker will be provided in the script statement. You have to describe its layout, configuration and event handlers in JavaScript.

<input id="datePicker" />

<script>
    // Target the input element by using jQuery and then call the kendoDatePicker() method.
    $("#datePicker").kendoDatePicker({
        // Add some basic configuration.
        value: new Date(2022, 0, 3)
    });
</script>

Once the basic initialization is completed, you can start adding additional configurations to the DatePicker.

3. Set the Minimum and Maximum Date

The DatePicker can display only dates in a specific range by configuring the min and max options.

<input id="datePicker" />

<script>    
    $("#datePicker").kendoDatePicker({        
        value: new Date(2022, 0, 3),
        min: new Date(2022, 0, 1),
        max: new Date(2022, 5, 30)  
    });
</script>

4. Add a Week Column

The weekNumber configuration allows you to display the week of the year on the left side of the calendar.

<input id="datePicker" />

<script>    
    $("#datePicker").kendoDatePicker({        
        value: new Date(2022, 0, 3),
        min: new Date(2022, 0, 1),
        max: new Date(2022, 5, 30),
        weekNumber: true
    });
</script>

5. Set the Format

You can customize the format of the displayed date by setting the format configuration of the DatePicker.

<input id="datePicker" />

<script>    
    $("#datePicker").kendoDatePicker({        
        value: new Date(2022, 0, 3),
        min: new Date(2022, 0, 1),
        max: new Date(2022, 5, 30),
        weekNumber: true,
        format: "yyyy-MM-dd"
    });
</script>

Next Steps

See Also

In this article