DatePicker Persist Selection

[Richard]

Afternoon,

 

I am trying to apply persistence to a DatePicker so that when a user navigates to another page and then returns, the DatePicker retains its value.  Here is my DatePicker:

        @(Html.Kendo().DatePicker()

            .Name("datepicker")

            .Events(e =>

            {

                e.Change("onChangeDate");

            })

            .Format("dd/MM/yyyy")

            .Max(DateTime.Today)

    )

 

The DatePicker defaults to today’s date on the first entry to the page and stores that value in the session storage.  This date is displayed successfully in the DatePicker.

     $(document).ready(function () {

        // Set the datePicker value

        var date = setDate();

        var datePicker = $("#datepicker").data("kendoDatePicker");

        alert(date);

        datePicker.value(date);

    });

The alert confirms the date variable value: Tue Dec 14 2021 00:00:00 GMT+0000 (Greenwich Mean Time)

Here are my other functions:

    function setDate() {

        // Get the datePicker value from session storage of the browser.

        var datePickerValue = sessionStorage.getItem("datePickerValue");

 

        if (nullCheck(datePickerValue)) {

            datePickerValue = kendo.date.today();

        }

        return datePickerValue;

    }

 

    function nullCheck(data) {

        // Return true if null

        return (typeof data !== 'undefined' && data !== null) ? false : true;

    }

 

On return to the page, the alert confirms that the date variable value is still the same as before, but that date is not displayed in the DatePicker by datePicker.value(date); The DatePicker remains blank.

The onChangeDate function sets the session storage to the newly selected date.

 

I've tried setting the format of the data variable to dd/MM/yyyy, but that doesn't seem to make any difference. Plus it works on first entry to the page so it must be able to interpret the date value.

 

Kind regards,

 

Richard

[Alexander]

Hi Richard,

Thank you for the provided information and code.

The mentioned behavior is caused because of how the session storage works in particular. In general, everything put into the session storage is stored as a key/value pair with the value being of type string instead of an object type.

With that said, the value method of the DatePicker component expects a Date object parameter upon setting or getting. Note also that the today method returns the current date as an object with this being the reason why the date value is set correctly during the first entry.

Having this in mind, in order to set the initially saved value from the session storage, you need to convert it back to an object type.

For example:

var date = setDate();
var parsedDate = new Date(date);
var datePicker = $("#datepicker").data("kendoDatePicker");

datePicker.value(parsedDate);

Additionally, I am sending a runnable sample for you to review that illustrates the mentioned above.

I hope this helps.

Regards,
Alexander
Progress Telerik

[Richard]

Hi Alexander,

Thank you very much for your reply.  I have followed your advice and amended my setDate function so that it always returns the date as an object:

    function setDate() {

        // Get the datePicker value from session storage of the browser.

        var datePickerValue = sessionStorage.getItem("datePickerValue");

 

        if (nullCheck(datePickerValue)) {

            datePickerValue = kendo.date.today();

        }

        else {

            // Convert date back to an object type from string

            datePickerValue = new Date(datePickerValue);

        }

        return datePickerValue;

    }

 

This works perfectly. Thanks again for your help.

Kind regards,

Richard