Hello kendo,

When an user is entering the date with an invalid format like dd.mm.yyyy (so 27.06.2023) into our datepicker, it looks like the date is accepted in the UI, but the value is actually empty. What is confusing for the user. To fix this we would like to clear the value when an user entered an invalid date. How can we do this ?

I found an example for the datetimepicker, but it requires an initial filled in date, if you start with an empty value it's not working. The problem comes from the problem that it's impossible to tell if the value is empy or invalid.

https://docs.telerik.com/kendo-ui/knowledge-base/prevent-invalid-values
PS the script has an bug and is not working, add to following to the script to get it working:   

        $("#datetimepicker").kendoDateTimePicker({
          change: onChange,
          close: onClose,
          open: onOpen,
          value: new Date()
        });
        var lastValidDate = $("#datetimepicker").data('kendoDateTimePicker').value();
      });
    </script> 

Regards,
Jeroen

After upgrading our application from an older version of Kendo to v2022 R1 (301), we discovered a strange problem with the Kendo DatePicker popup calendar. Everything works fine on a desktop web browser but on a mobile phone the month calendar view renders as in the attached image:

Other calendar display modes work correctly. The problem seems to occur on all the phones we have tried (Android, iPhone).

The DatePicker control is instantiated on demand via Jquery function. No special DatePicker features used. Here is a snippet from the rendering function (ownerDiv is a parameter passed to the function):

            var datepickerWrapper = ownerDiv.find('#end-date-wrapper');
            datepickerWrapper.empty();
            datepickerWrapper.append('<input id="chart-end-date" name="chart-end-date" style="width:8em" />');
            datepickerDiv = historyDiv.find('#chart-end-date');
            datepickerDiv.kendoDatePicker({
                animation: false,
                change: function (e) {
                    changeEnddate(e);
                }
            });

The only slightly unusual thing about this is the parent HTML is part of the detail pane for a Kendo grid.  The popup calendar used to work just fine in the old version of Kendo we used to use (version circa 2018).

I'm at a loss. Android Chrome debugger running against a phone executing the DatePicker does not reveal any browser exceptions.

Any thoughts?

Jeff Benson
Senior Developer
New Boundary Technologies, Inc.

Hi, I need help in Kendo jQuery Gantt, I managed to remove time from Grid columns but how can I remove Time from Planned Start, Planned End, Actual Start, and Actual End fields? I only need date to be selected from the picker and to show in dd/M/yyyy format.

Hi Team,

 we are using kendo UI jquery grid for  displaying the data. In one of the column we have to display date time. is there a way can we filter date and time combined? with date alone we are able to filter but not with date time together. Please let us know and share the code samples/link  if possible

The new dateInput functionality added to the kendoDateTimePicker only deals with format.  It does provide true mask behavior similar to the MaskedTextBox control.

I want our users to be able to type 03012023 and the mask would convert it to 03/03/2023 automatically.

Is there any way to enable/incorporate this modern UI behavior into the kendoDateTimePicker?  The current implementation generating a lot of complaints from users.

I have just seen the demo about using kendo DatePicker. But when inspect the calendar icon under Accessibility menu I can see the Default name for the button is given as "select". I would like to change the name of button from "select" to "Pick a date". Please Guide through. I have attached image for your reference.

Following is the code snippet:

https://dojo.telerik.com/apAGayIJ

Seems the componentType: 'modern' breaks any code that would make intervals in the classic view.  I've also tried timeView.dataBind to no avail.  Just trying to get 15 minute increments in the time picker...

In my date picker, I have a range of available dates from 1/1/2022 - 12/31/2024. When I open the date picker and drill back to the years they look out of place because the first three cells which were likely reserved for 2019 - 2021 are blank. 2022 starts in the middle of the picker and 2024 wraps to the next line. There is a feature with the months to display the disabled days using month.empty and passing an HTML string. I don't see anything like that for year though. Is there either a way to show disabled years or to start with the first year in the first cell of the first row? 

$("#myDatePicker").kendoDatePicker({
        month: {
            empty: '<span class="k-state-disabled">#= data.value #</span>'
        },
        // I'd like to do something like the below key:year: {
            empty: '<span class="k-state-disabled">#= data.value #</span>'
        },
        dateInput: true,
        start: "month",
        depth: "month",
        min: new Date(2022, 0, 1),
        max: new Date(2024, 11, 31),
        format: "d"
    })

I have 2 fields in my form. 

the first field is using NumericTextBox to set a year

the 2nd field would be a date picker with date input to select the date, the format would be dd MM

I would like to check if it is possible, onblur of the numeric textbox would set the date-picker selectable dates based on the year entered in the first field