RadDatePicker DateInput displays wrong date when returning to previous page in Chrome

[Hans Gunnar]

Hi,

There seems to be a bug with the displayed date vs selected date when you use the back-button to return to a page where you have done a date selection.

I've only seen this with Chrome v26 and Firefox v20, not Firefox v19 or IE 10.

How to recreate:
Go to: http://demos.telerik.com/aspnet-ajax/calendar/examples/design/sunny/defaultcs.aspx
All date boxes there have todays date pre-selected and displayed in the dateinput field.
Select another date for one of the date pickers.
Go to another web page in the left hand menu (i.e. "DatePicker - First Look").
Then click the back-button in the browser.
Notice now that the date you changed to in the step above is displayed as you left it. But when opening the calendar you notice that today's date is actually the selected one.

On a page where you have a post back the user may go back and they see their date is selected, but when they submit the form the default (today's) date is the one actually used.

In IE 10 and Firefox 19 the date you changed to is the one displayed and selected when you try the same thing.

Not sure if this is a bug in the RadDatePicker control, or a bug in Chrome and Firefox, but would be nice if you can have a look at it.

[Vasil]

Hello Hans,

Indeed, there was a problem with the auto-fill from browsers on back button inside the RadInputControl that we have fixed for the latest service pack. However, the get_selectedDate does not read the auto-completed value by default, it is updated only on focus, since we didn't want to introduce big breaking changes that will affect lots of users.

To workaround this problem in the picker, you can use this JS to override the get_selectedDate of the DateInput. Place the code under your ScriptManager, or above the first picker declared in your page.

<script type="text/javascript">
    Telerik.Web.UI.RadDateInput.prototype.get_selectedDate = function ()
    {
        if (!this._calledAtleastOnce)
        {
            //update value when it is filled by browser's autofill on back button.
            this._calledAtleastOnce = true;
            if (this._lastSetTextBoxValue !== this._textBoxElement.value)
            {
                this._updateHiddenValue();
            }
        }
        return this._value ? new Date(this._value) : null;
    }
</script>

Regards,
Vasil
the Telerik team

[Hans Gunnar]

Thank you. Adding this script seems to work well.

[Andrew]

I am also getting this issue chrome, the fix did not work for me. and ie10 throws a javascript error.

I am also running the latest version of the controls

[Vasil]

Hello Andrew,

What is the error that you get? Do you have any custom scripts in the page?
Sharing us more information will help us to determinate what exact issue you are facing, so if possible please send us runnable code that we can test.

Regards,
Vasil
Telerik

[Gregory]

Hello Vasil,

I am having the same issue as described on this post. I tried to add the script but it did not change anything in Chrome and Firefox.
This behavior applies also to IE8 for what I can test. None of these browsers can pick up the js error
Nevertheless, in IE11, hitting the back button will display the date picker with the default date. Even using any emulation mode in IE11. This without adding the script.
Also the script added in IE11 will return an error "Unable to get property prototype of undefined or null reference (see attached file)

Do you have any new info about this?

Thank you
Gregory

[Vasil]

Hi Gregory,

The error that you get happens when you add the script on page where there is no RadDateInput, or if you place it above the ScriptManager. In this case your script executes before the scripts of the DateInput are included. If you want to override particular method, the method should be first defined. So move your script below the ScriptManager, and make sure it is on page where there is DateInput/DatePicker.

Regards,
Vasil
Telerik

 

 

[Gregory]

Vasil,

Yes you were right. This script at the end of my page did not raise an error. Nevertheless, my date input for my calendar is still displaying the previous date meanwhile submitting the form will take the default date of the radCalendar.
I made a quick video here : https://www.dropbox.com/s/6yjrssdbnbhh7my/date%20picker%20not%20updating.avi
I change the date and submit. Date is ok. Hit the back button, it displays my changed date. Submit again. This time the date is the default date, not mine.

Thank you
Gregory

[Maria Ilieva]

Hello Gregory,

I further tested the provided approach on my end but was not able to replicate the issue you demonstrates in the test movie.
Find attached a sample runnable example that works properly on my side.
Test it locally and verify what the difference in your case is.

Regards,
Maria Ilieva
Telerik

 

 

[Gregory]

Hello Maria,

Thank you for investigating. I have been speaking about this issue on another post too.
http://www.telerik.com/forums/rad-datepicker-not-updating-the-date-text-in-input-field#XVzF0fTm5UyWanPSavvGKA

In this post your team has been able to reproduce my issue and the problem has been logged to be taken care of by your developers.

Thank you
Gregory

[Eyup]

Hello Gregory,

I'm glad you've came up with a mutual result.
I would suggest that you address any further questions in the mentioned thread.

Regards,
Eyup
Telerik