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.

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

I want the datetimepicker to pull from the database if a value exists, show nothing if it doesn't, and get the current date and time when user clicks on the calendar icon.   It doesn't get the current time.  It shows midnight.  I can get the datetimepicker to default to today's date (on display) and current time if I don’t try and pull a value from the database.

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

Parsing of the users Input (defined by ParseFormats) is stopping, as soon as min date is set. This happens if the date,evaluated by the parsing, is outside the min/max range. 

I would suggest, that parsing takes the min/max boundaries into account. 

Actual behavior:

User uses down key or mouse scroll to change the time. A 00:00 hour is set instead of chosen hour on blur.

Expected behavior:

A value chosen by user remains selected. It's not changed by the timepicker.

Additional Context:

This problem occurs only when picker.enable(true) is called after component creation and user uses down arrow / mouse scroll to get to the the 'previous' day. When no .enable method is called everything works fine. Please see attached code snippets and gifs.

Dojo link: https://dojo.telerik.com/OZEDuFEg

Bug can be reproduced using the following code snippet:

 $(document).ready(function () {
    // create TimePicker from input HTML element
    var picker = $("#timepicker").kendoTimePicker({
            dateInput: true,
            format: 'HH:mm'
        }).data('kendoTimePicker');
    picker.enable(true)
});

Removing 

picker.enable(true)

fixes the issue

Dear Kendo UI team,

I have experienced an issue with the Kendo UI datepicker when accessing it with a screenreader on the Kendo UI Vue preview page (https://www.telerik.com/kendo-vue-ui/components/dateinputs/datepicker/):

In the month/year view, if I change the selection, the selected date (from the original view before "zooming out" into the month/year view) is read out.

Expected behaviour: The currently selected month/year should be read out.

Steps to reproduce:

• Start a screenreader (I have tried NVDA and JAWS).
• Focus on the calendar, open it.
• Change the view to the month/year view by using Ctrl+Arrow Up.
• The focus is now on the month/year corresponding to the current date.
• Change the selection by using one of the arrow keys.
• No matter the current selection, always the (whole) current date is read out.

Software versions used:

• Browsers:
  • Chromium 77.0.3865.75
  • Microsoft Edge 44.18362.449.0
• Screenreader (always initial configuration):
  • NVDA 2019.1.1
  • JAWS 2019.1906.10 ILM
• OS: Windows 10, latest updates
• Keyboard layout: German

Furthermore, it seems to me that with Microsoft Edge in combination with JAWS I cannot open the month/year view, maybe because of a conflict of keyboard event handlers between the component and JAWS. Also the escape key has no effect, it does not close the datepicker.

The issue also occurs for the original jQuery version.

Thanks for your support.

Kind regards,

Andreas Schütz

Instead of a drop down for the time choices can they be displayed so the user doesn't have to scroll through a drop down and the choices can be displayed similar to your example on UI for WinForms. Thanks.

Bug report

DatePicker Calendar is not visible on Safari on iPad when programmatically set from readonly(true) to readonly(false)

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

Current behavior
1: Open above Dojo on iPad Safari
2: Click Edit
3: Open DatePicker Calendar

The calendar dates are missing

Expected/desired behavior
Calendar dates shall be visible

Environment
Kendo UI version:  2020.2.617
Browser: [ ipadOS 13.6 Safari  ]

Hello,

I would like to request adding a property like DisplayDate which will select the view and value of the Kendo UI DatePicker initially without setting it with the value method.

Thanks!

Bug report

If the user opens the Kendo UI DateTimePicker with a componentType of "modern", then selects set without any modifications, it will select today instead of what is in the input.

Reproduction of the problem

1. Go to this Progress Kendo UI Dojo.
2. Open the DateTimePicker and select set.

Expected/desired behavior

The value in the input should remain set as the Kendo UI DateTimePicker's value.

Environment

• Kendo UI version: 2020.3.1118
• Browser: All

Hi Team,

I would like the user to be able to add a value into the Kendo UI DateTimePicker's input with the calendar opened.  Currently, if the calendar is open, the focus will be on the calendar, and it will select today's date upon pressing enter. 

Thank you! 

Bug report

In DateInput, when format is set to "yyyy/MM/dd", the day number cannot be greater than 9.

Regression introduced with 2023.2.606

Reproduction of the problem

1. Open the DateInput demo - https://dojo.telerik.com/edokOJuG
2. Try to enter a number greater than 9 in the day part.

Current behavior

A number greater than 9 cannot be entered in the day part.

Expected/desired behavior

Numbers greater than 9 should be allowed for the day part.

Environment

• Kendo UI version: 2023.2.718
• Browser: [all]

Bug report

Modern DateTime picker messed-up and switches to timepicker when timpicker clicked i nthe back

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

2. Click on the Calendar icon

3. Click around the calendar to hit the datepicker in the back

Result:

Environment
Kendo UI version: [all]
jQuery version: x.y
Browser: all

Bug report

When trying to select a value from the modern Kendo UI TimePicker configured with Max and Min ranges, the currently selected value of the TimePicker is not updated.

Reproduction of the problem

1. Go to this Progress Kendo UI Dojo.
2. Open the TimePicker - notice it's at 9:00
3. Click Set
4. Value is set to 00:00.

Expected/desired behavior

The value should be set upon initial selection.

Potential Workarounds

• Use Classic ComponentType
• Turn off animations, and open/close the TimePicker. (Dojo)

Environment

• Kendo UI version: 2024.3.806
• jQuery version: All Supported Versions
• Browser: All

Unable to edit date properly, when date is selected from the Kendo UI date picker.

Below are steps to reproduce

#1: Select date from the date picker

#2: Click on backspace in date field(place cursor end of Date 08/06/2018 place cursor next to 8) then Control is moved to another place, it supposed to be at 1

Provided below is the dojo for checking

http://dojo.telerik.com/ewANiMuM

Note:

Don't have issue in older versions in  Kendo UI 2017 R1 and lower versions,

found the issue from the version Kendo UI 2017 R2 and above

Hi Team,

Can you please help on below issue

By clicking on Backspace on the end of date value(09/08/2018), control is moved to another place(control is moved to first 0 instead of 1)

Issue with second Datepicker from the below sample

https://docs.telerik.com/kendo-ui/controls/editors/datepicker/how-to/date-masking-using-maskedtextbox

Thanks in advance