Globally Modify Default Options

The following example demonstrates how to globally modify the default options in the DatePicker.

    <input id="datepicker" value="10/10/2011" style="width:150px;" />
    <br />
    <br />
    <input id="monthpicker" value="November 2011" style="width:150px" />
    <script>
      kendo.ui.DatePicker.fn.options.parseFormats = ["MMMM yyyy"];
    </script>
    <script>
      $(document).ready(function() {
        // create DatePicker from input HTML element
        var datepicker = $("#datepicker").kendoDatePicker().getKendoDatePicker();

        $("#monthpicker").kendoDatePicker({
          // defines the start view
          start: "year",

          // defines when the calendar should return date
          depth: "year",

          // display month and year in the input
          format: "MMMM yyyy"
        });
        console.log(datepicker.options.parseFormats); // display the set options
      });
    </script>

See Also

• DatePicker JavaScript API Reference
• How to Create Date Masking
• How to Hide the Default Button
• How to Integrate DatePicker with DateJS Library
• How to Make Input Elements Readonly
• How to Persist Entered Dates
• How to Resize Calendar Based on Input Width
• How to Set the First Weekday

For more runnable examples on the Kendo UI DatePicker, browse its How To documentation folder.