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.

Hi,

We are using the current culture fr-BE which uses dd-MM-yyyy format but when using the DatePicker and inspecting the HTML, we see the following.

As you can see in the screenshot below, the culture is correctly set. 

This happens only with fr-BE, we can see no problems when switching between nl-NL, en-GB, nl-BE, etc.

When we add .Format("d") the component works correctly but that's not what I would expect, since "d" is the default.

And to be honest, I don't want to add that manually everywhere. It should take the correct one as a default.

Our current version is 2022.3.913 but updating is not possible at the moment.

Any help would be appreciated

Kind regards

I've been working with the Kendo DatePicker UI component and I really like the masking and validation it provides if a user wants to manually enter a date when DateInput() is applied. However, it also adds segmentation which means a user either needs to click or use arrow keys to move on to edit other parts of the date like month, day or year. If I remove DateInput() there is no more segmentation, but also no validation or masking. Is there a way to keep validation and masking in the date input field without the segmentation and keep the date picker functionality? My other option is to remove .DateInput() along with the messages and manually apply validation and masking, but if there is a solution within the component itself, that would be ideal. Below is what we currently have.

                                                       @(Html.Kendo().DatePicker()
.Format(Model.DateMask)
.Name("DateStart")
.DateInput()
.Messages(m => m.DateInput(d => d.Day("__")))
.Messages(m => m.DateInput(d => d.Month("__")))
.Messages(m => m.DateInput(d => d.Year("____")))
.Culture(UICulture)
.Footer(false)
                          )

I am using a Kendo.Filter object like the following to filter results in a Kendo Grid:

@(Html.Kendo().Filter<CustomPersonClass>()
     .Name("personFilter")
     .DataSource("peopleDS")
     .ApplyButton(false)
     .Fields(f =>
     {
         f.Add(p => p.LastName).Label("Last Name");
         f.Add(p => p.FirstName).Label("First Name");
         f.Add(p => p.MiddleName).Label("Middle Name");
         f.Add(p => p.StartDate).Label("Start Date").Operators(o => o.Date(d => d.Eq("Is equal to").Gte("Greater than equal").Lte("Less than equal")));
     })
)

 I have helper code to handle the toolbar in my Kendo Grid like the following, :

@helper ToolbarTemplate()
{
    <button class="k-button k-button-solid k-button-solid-base" id="applyFilter"><span class="k-icon k-i-filter"></span>Apply Filter</button>
    <button class="k-button k-button-solid k-button-solid-base" id="clearFilter">Reset</button>
    <button class="k-button k-grid-excel k-button-solid k-button-solid-base"><span class="k-icon k-i-excel"></span>Export to Excel</button>
}

I also have some JavaScript in a function to apply the filter when the Apply Filter button is clicked, as seen here:

$("#applyFilter").click(function (e) {
    //e.preventDefault();
    var myFilter = $("#personFilter").getKendoFilter();
    localStorage["kendo-person-filter-options"] = kendo.stringify(myFilter.getOptions().expression);
    myFilter.applyFilter();
});

The problem I am having is if I enter an invalid Leap Year date (e.g. 2/29/2003, since 2023 didn't have a February 29th), I get no data back; however, if I enter a valid Leap Year (e.g. 2/29/2004), my Kendo Grid will show data.  Is there a way to validate the date that is being entered manually into a DatePicker field used for filtering?  That is, if I use the DatePicker, it will not show me 2/29/2003 as an option, but if I type in 2/29/2003 and click Apply Filter, it doesn't throw any kind of error about 2/29/2003 being invalid.

I have a model class given below in MVC. I am trying to set MinDate and MaxDate for the DatePicker

public class YourModel
{
    public DateTime Deadline { get; set; }
    public DateTime MinDate { get; set; }
    public DateTime MaxDate { get; set; }
}

@(Html.Kendo().DatePickerFor(x => x.Deadline)
    .Name("datepicker") // Set the name attribute
    .Format("MM/dd/yyyy")
    .Min(DateTime.Today) // Set the minimum date
    .Max(DateTime.Today.AddMonths(3)) // Set the maximum date (in this example, 3 months from today)
    .HtmlAttributes(new { id = "datepicker" }) // Set the ID attribute
)

How can we make sure optional field is not validated?  Also the model is a DateTime? type.

                                    i.Add()
                                        .Field(x=>x.ProductionDate)
                                        .Label(l => l.Text(Extensions.GetPropertyDisplayName<Detail_InfoForm_ViewModel>(x => x.ProductionDate)).Optional(true))
                                        .Editor(e => e.DatePicker()
                                            .HtmlAttributes(new { style = "width: 100%", title = "Production date" })
                                            .DateInput()
                                        );

I've just started a new project and used the latest release of the framework (v2022.3.1109). Unfortunately I've encountered some issues which didn't appear using earlier versions of the framework (pre R1 2022 I believe).

The problems are

• the datepicker control stretches to 100% of the page, if a width is not set in the html attributes (I can't believe this is the default intended behavior)
• I cannot reduce the font-size of the datepicker control regardless of where I put the style statement (parent container, html attributes etc..)
• The same is true for the grid, whereas before font size could be adjusted using the style on the parent div, this no longer works

Is there any documentation detailing the changes from R1 2022 and how to achieve these relatively simple appearance changes?

I'm using bootstrap 5 and the kendo.bootstrap-nordic.min.css  css file.

Thanks

Hello,

I am Kendo Grid in MVC

The grid is set up for in-cell batch editing. One of the fields is a date field. If the date is selected using date picker the value stays in the cell, whereas if the date value is manually entered the value does not hold in the cell. Any suggestions why the value is not holding in the cell when manually entered.

Thank you