Persist Entered Dates

The following example demonstrates how to persist the date that is already entered in the DatePicker when the user navigates to another page and then comes back.

While supported by default in modern browsers, this functionality is not provided by Internet Explorer 9 and earlier.

    <div id="example">
      <div id="cap-view" class="demo-section k-header">
        <input id="color" name="color" />

        <input id="datepicker" name="datepicker" />
      </div>
    </div>
    <script>
      $(document).ready(function() {
        // Get the datePicker value from the local storage of the browser.
        var datePickerValue = localStorage.getItem("datePickerValue");

        $("#datepicker").kendoDatePicker({
          value: datePickerValue,
          change: function() {
            // Save the datePicker value in the local storage of the browser.
            localStorage.setItem("datePickerValue", this.element.val());
          }
        });

        var data = [
          { text: "Black", value: "1" },
          { text: "Orange", value: "2" },
          { text: "Grey", value: "3" }
        ];

        var colorValue = localStorage.getItem("colorValue");

        $("#color").kendoDropDownList({
          dataTextField: "text",
          dataValueField: "value",
          dataSource: data,
          value: colorValue,
          change: function() {
            localStorage.setItem("colorValue", this.value());
          },
          index: 0
        });
      });
    </script>  

See Also

• DatePicker JavaScript API Reference
• How to Create Date Masking
• How to Globally Modify Default Options
• How to Hide the Default Button
• How to Integrate DatePicker with DateJS Library
• How to Make Input Elements Readonly
• 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.