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

Persist the Entered Dates of the DatePicker

Environment

Product Progress Kendo UI DatePicker for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I persist the date that is already entered in the Kendo UI for jQuery DatePicker when the user navigates to another page and then comes back?

Solution

The following example demonstrates how to achieve the desired scenario. 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

In this article