Kendo DatePicker value not populated after refresh (Firefox only)

1 Answer 185 Views
Date/Time Pickers
Yudith
Top achievements
Rank 1
Veteran
Yudith asked on 20 Apr 2022, 08:01 AM

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.

1 Answer, 1 is accepted

Sort by
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 22 Apr 2022, 04:03 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Date/Time Pickers
Asked by
Yudith
Top achievements
Rank 1
Veteran
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Share this question
or