Bug report

Modern DateTimePicker does not show 24h format in popup with format: "dd/MM/yyyy HH:mm". The format, however, is correctly shown in the input

Reproduction of the problem
Dojo: https://dojo.telerik.com/inOlIJuh

Expected/desired behavior

Popup should show also 24h format

Environment

jQuery: 3.4.1

Kendo UI version: 2023.3.1114
Browser: [all]

The TimePicker widget allows specifying a max date via its options. If none is specified, the widget uses a default max date (00:00 of the current day). However, since the selected value also use the current day for its date part, all selected values are bigger than the max value.

This means that when checking whether a selected value is smaller than the defined max value, the check will always fail, because e.g. 2022-12-22 12:00 is bigger than 2022-12-22 00:00. This DOJO demonstrates the behaviour (select a value and check the console output).

In my opinion, it would make more sense to set the default max date to either 23:59 or 00:00 of the following day.

This can be reproduced on your demo page. If you inspect the input element there, you'll see this:

I would expect this element to only have the role="datepicker" and not the role="combobox". This caused an issue for us, because we use this attribute to check some things in our javascript code.

popup: {
   position: 'top right'
}

1. Click the 'Calendar' icon button on the date field. The date picker should pop-out. 
2. Now whilst the date picker if out change the iPad orientation to Landscape mode. 
3. Check the date field again. Notice that the Calendar icon button has been duplicated.

Is there any possibility to add a new property to the datepicker that will let the user to use a datepicker like the ones used in materializecss framework?

Sample here:
http://materializecss.com/forms.html#date-picker

The datepicker does not validate the year when selecting a date and prepending the year with a number. However if you put any character after the year it is stripped off. It would be understandable to allow dates that are longer than 4 digits but the picker only goes to 2099.

This causes the date to be returned as null.

Currently when creating a Date/Time Picker object by using the time in milliseconds since 01.01.1970 UTC the Date/Time Picker works perfect.

When trying to submit a form containing a Date/Time Picker, the widget will submit the formatted time/date instead of the milliseconds since 01.01.1970 UTC.

There is a workaround to extend the onChange Event and manipulate the value of the input field manually. This might solve the technical problem but now the UTC milliseconds will be displayed inside the widget.

Might it be possible that the widget formats the display date/time and keeps a hidden input field for storing the value? It is actually not possbile to use dates/times in UTC milliseconds with this widget allthough the JavaScript Date object can handle it.

In a filter input field I had one blur event
to fix a entered date string.
It wasn't called if the users hit "Enter" instead of cliking the Filter button or hitting TAB which
would cause a blur event.

T. Tsonev asked me to post this to "UserVoice portal":
Maybe an event that is triggered before attempting to read the value from the input.
This will consolidate both handlers in your case.


Below are the two handlers to fix an input field if a blur or Enter key is done/hit:

---

If an input field is changed and the user does a blur (TAB or clicks filter button) after
entering a date
or
hits the enter key without doing a blur.
the FixDate function is called and input field is changed
before the filter popup is submitted
and the Filter works if a date like this is entered:
11/9/2004 0:0
FixDate canges to:
11/9/2004 12:00 AM.

Below is the code I changed:
See the sections with "Fix "
comments.

Maybe they need a on "blurOrEnter"
event so you don’t need to make two tests?  (((, or an event that is triggered before attempting to read the value from the input)))
...
               // Fix - Modified to call a FixDate function.
               // Test for a blur (ie: click or tab to another widget and leave the input field)
               // NOTE: blur doesn't happen when the enter key is hit
               $("[data-role=datetimepicker]").on("blur", function()
               {
                    var element = $(this);
                    FixDate(element);
               });
     
               // Fix - Modified to handle the "Enter" key
               //       and call the FixDate function
               //       to modify the input field from "11/9/2004 0:0" to 11/9/2004 12:00 AM"
               //       before the form is submitted.
               //       This makes the filter work when the enter key is hit
               //       which doesn't cause a blur to happen.
               $("[data-role=datetimepicker]").on("keydown", function(e)
               {
                    // Test for Enter key
                    if (e.keyCode == 13)
                    {
                         var element = $(this);
                         FixDate(element);
                    }
               });
          }
     });

     // Change the date in the filter input field by using 
     // Datej Date.parse.
     // This will change strings like: "0:0" 
     // To: "1/29/2015 12:00 AM"
     // and allow the filter to work
     function FixDate(element) 
     {
          // Get element for datetimepicker
          //var element = $(this);
          // Get widget for datetimepicker
          var widget = element.data("kendoDateTimePicker");

          // See if element has changed
          if (element.val())
          { 
               // Set Text of widget to a Datejs string date from the elements text
               // IE: 11/9/2004 0.0 will be 11/9/2004 12:00 AM
               widget.value(Date.parse(element.val()));

               // Fix by T. Tsonev 01/26/2015
               // make a change happend so new text is used.
               // ie: Use "11/9/2004 12:00 AM" instead of "11/9/2004 0:0"
               widget.trigger("change");
          }
     }

...

---

The current date time and date-time pickers don't allow for scrolling the data using the mouse scroll. 
This functionality is available in ajax controls this makes a mix web site not consistent in behavior of controls.

DatePicker should let developer decide if the chosen day of the month should be persisted from month-to-month.

By default the DatePicker remembers the day of the month the user has selected, and that day gets styled differently even when the user navigates away to a different month: the user selects January 12th and then navigates to August, and the 12th day of August is styled differently too.

But there are many use cases for a DatePicker where it is not appropriate behavior to remember the previously selected day of the month when the user navigates to a different month. Remembering the day can actually make things confusing for the user in applications where this behavior is not the right behavior.

Mobi scroll already provides this kind of selection (http://demo.mobiscroll.com/calendar/calendardatetime/#)

but mobiscroll does not offer the full support of a schedule that kendo UI does. But oh how sweet it would be if Kendo also provided support for scrolling. 

As far as UX/UI is concerned picking a date and time via slot machine scrolling style is much easier to do on a mobile device.

Thanks!

because dateTimePicker can show weekNr now, if it is possible to enable select whole week ( or select weekNr), Thanks

Add the feature to be able to walk through date, hour, and minute selection in a stepped fashion, similar to the functionality of this DatePicker:

http://www.malot.fr/bootstrap-datetimepicker/demo.php

The gist is to first allow for day selection. Then, with the popup still open, give the user the ability to select the hour of the day, and finally the particular minute of that hour.

Have the time drop down function kind of like normal drop downs, where they don't filter, but will jump down to the time you start typing after opening the drop down like the drop downs do when you start typing after opening them.

I get people complaining at the length of lists for timepicker inputs, especially if using small minute intervals.
How about an alternative input mode that allows for faster and simpler input.

This method is great - visual, intuitive and quick.
http://www.youtube.com/watch?v=lYxxyPvOHyA

Few others out there all with pros and cons

DateInput doesn't support fuzzy dates. (Where day/month/year are optional) This is useful in order entry applications where the developer doesn't have control over what information is available from customers and information supplied is inconsistent.

The DateInput controller could have an option to read/submit formatted strings or some kind of strongly typed DTO so that given parts of the DateInput initialize as blank/null.

An alternate header with Month and Year Dropdowns would be helpful on the DatePicker

The editors do support inline footer's but you can't use an external footer template yet.

Example template:

<script type="text/template" id="datepicker-footer-template">

    "Today: #:kendo.toString(data, 'yyyy-MM-dd')#, Week: #:kendo.recurrence.weekInYear(data,kendo.culture().calendar.firstDay)#"

</script>

Suggestion to add a footer-template configuration option like this:

<input name="Date" data-role="datepicker" data-bind="value: Date" data-format="yyyy-MM-dd" data-week-number="true" data-footer-template="datepicker-footer-template"/>

Jan