Kendo DatePicker value not populated after refresh (Firefox only)

[Yudith]

Hi Telerik,

I got an issue when rendering kendo datepicker. At first time we open the page, the value of Kendo datepicker populated. But then, after refresh (via browser button or f5) the value was gone, and only the format shown like below:

The only way to make it populated is to:

• Hard reload the page (ctrl+f5)
• change the browser (tested on chrome).
• change datepickerfor to datepicker() and add .value(x.FldBirthdate.Value.ToString("MM/dd/yyyy")).
  we have to ToString() it, if it's only x.FldBirthdate, it doesn't work.

Here is how I render the kendo datepicker

@(Html.Kendo()
                    .DatePickerFor(x => x.FldBirthdate)
                    .Max(DateTime.Now)
                    .DateInput()
                    .Format("dd/MM/yyyy")
                    .ParseFormats(new List<string>() { "dd MMM yyyy" })
                    .HtmlAttributes(customAttributes)
                    .Events(x => x.Change("dateOnChange"))
                )

I already tried to remove the max, dateinput(), format, parseformat, htmlattributes but the problem still persist.
There is no error message shown in the console.

Kendo version: 2019.3.1023
Jquery version: 3.4.1

Please advise.
Thank you.

[Patrick | Technical Support Engineer, Senior]

Hi Yudith,

Upon utilizing the approach mentioned in the initial post, the Kendo UI DatePicker is working as expected with the mentioned versions and retaining its value without the custom attributes:

Views/Index.cshtml

@model DatePickerExample.Models.DateViewModel


@(Html.Kendo().DatePickerFor(x => x.FldBirthdate)
            .Max(DateTime.Now)
            .DateInput()
            .Format("dd/MM/yyyy")
            .ParseFormats(new List<string>() { "dd MMM yyyy" })
            // .HtmlAttributes(customAttributes)
            .Events(x => x.Change("dateOnChange"))
)

<script>
    function dateOnChange(e) {
        console.log("dateOnChange");
    }
</script>

Controllers/HomeController.cs

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var myDate = new DateViewModel() {  FldBirthdate = DateTime.Now.AddDays(-1) };
            return View(myDate);
        }
    }

Models/DateViewModel.cs

    public class DateViewModel
    {
        public DateTime? FldBirthdate { get; set; }
    }

Please take a look at the following screencast and let me know if I am missing something regarding the behavior.

Regards,
Patrick | Technical Support Engineer, Senior
Progress Telerik

[Brightstar]

Yudith,

Did you ever find the resolution to this?

We're seeing the same thing with Kendo UI v2021.3.1207

Thanks,
Jeff

[Patrick | Technical Support Engineer, Senior]

I can confirm the same implementation used in the previous reply using UI for ASP.NET MVC version 2021.3.1207 is working as expected in the latest version of Firefox as seen in this screencast.   Please give the prior approach a try and let me know if you have any questions.

[Brightstar]

Patrick,

Thank you for the follow up, but I'm still seeing this issue, so I tried to recreate it in a smaller example.

I've attached the example project to replicate this issue. I've also uploaded a video of it happening.

Works in Chrome, not in Firefox.

Key is, as stated by OP, that a refresh (just F5) doesn't work, while a hard refresh (ctrl +F5) does work.

    public class IndexViewModel
    {
        public DateTime DateAsDateTime { get; set; }
    }

        public IActionResult Index()
        {
            return View(new IndexViewModel { DateAsDateTime = DateTime.Today });
        }

@model IndexViewModel

<input id="dtDate" asp-for="@Model.DateAsDateTime">

<script type="text/javascript">
    $(document).ready(function () {
        $("#dtDate").kendoDatePicker();
    });
</script>

Thanks,
Jeff

[Patrick | Technical Support Engineer, Senior]

Thank you Jeff for the video and sample as I was able to reproduce the issue.

Upon reloading using F5 in Firefox, the input's type is set to datetime-local, and the input 's control variation is changed to the default date picker.  Then, the Kendo UI DatePicker is initialized with a blank input which normally has a type of text.  

To fix this issue, set the type of the input to text and the component will retain its value and use the Kendo UI DatePicker as shown in this video.

View

@model DatePickerExample.Models.IndexViewModel

<input id="dtDate" asp-for="@Model.DateAsDateTime" type="text" />

<script type="text/javascript">
    $(document).ready(function () {

        $("#dtDate").kendoDatePicker();
    });
</script>

Hope this helps, and thanks again!

[Brightstar]

Yes Patrick, that does help, I came to a similar solution myself of removing the asp-for tag helper attribute (that seems to be putting the datetime-local type in the element) and just using value=Model.MyValue. So thank you for that advice.

However, that obviously means we have to manually update each control individually rather than Kendo handling them all itself. Would it be prudent for Kendo to check/set the type value of the element to an appropriate type that will work? If so, is that something I should submit via a Bug Request, and can I link this item?

Thanks,
Jeff

[Patrick | Technical Support Engineer, Senior]

I reached out to our engineers about the behavior for further analysis.  Additionally, I noticed your Bug Report, and I have forwarded to them.  Please follow the report for all updates.

[Brightstar]

Thank you Patrick. Will watch the Bug Report for updates. Appreciate all the feedback!