Currently, the DatePicker can be set to read-only mode by adding the "readonly" attribute through the HtmlAttributes() option or by calling the client-side readonly() method.

Is it possible to implement a built-in Readonly() option, so the DatePicker is initialized as read-only? For example:

@(Html.Kendo().DatePickerFor(m => m.StratDate)
  .Readonly(true)
)

This just seems like a minor oversight since the Enable(bool) method exists on the DatePicker html helper and other Kendo taghelpers support the enable or enabled attribute, but there doesn't seem to be an enable-like attribute for the kendo-datepicker. Thanks!

<kendo-datepicker for="ReadOnlyDate" enable="false"></kendo-datepicker>

### Bug Report

Picker TagHelpers do not set the "value" attribute in conjunction with the "for" attribute.

### Reproduction of the problem

1. Create a model with a nullable DateTime property:

         public class MyModel
         {
               public DateTime? Birthday { get; set; }
         }

2. Declare either a DatePickerFor, DateInputFor, or TimePickerFor TagHelpers and set an initial value:

        @model OrderViewModel
        <kendo-dateinput for="OrderDate" value="DateTime.Now">
          ...
        </kendo-dateinput>

3. Notice, that the value has not been assigned accordingly.

This behavior is not consistent with the HTMLHelper, as the Value() attribute is taken more predominantly when the PickerFor HtmlHelper is utilized:

@(Html.Kendo().DatePickerFor(m => m.ShippedDate)
    .Value(DateTime.Today)
)

.NET 6 introduced DateOnly and TimeOnly types, but none of the relevant date/time controls support these types.

There is already a feature request to support DateOnly in DatePicker; this feature request is about adding support for TimeOnly to TimePicker.

Bug report

The issue is reproducible when the TimePicker's dates configuration is set and its min() API method is called. Afterwards, if the user select a time, the component shows the wrong time (2h earlier) as selected.

Reproduction of the problem

1. Run this dojo example: https://dojo.telerik.com/IPUlOkeW
2. Select an item in the picker's dropdown

Current behavior

The TimePicker shows a selected value that is 2h earlier than the actual time the user has selected.

Expected/desired behavior

The time the user selects is shown as selected value.

Environment

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

### Bug report

When the TimePicker's type is "modern", the "min" and "max" options cannot be set dynamically through the min(), max(), and setOptions() methods.

### Reproduction of the problem

1. Define the TimePicker with componentType: "modern".
2. Set its "min" and "max" values through the min() and max() options.
3. The "min" and "max" values are not visually updated.

A Dojo sample for reproduction: https://dojo.telerik.com/OXAqUYiw

### Expected/desired behavior

The  "min" and "max" values must be dynamically updated when the TimePicker's type is "modern".

### Workaround

    let timeView = $("#timepicker").data("kendoTimePicker").timeView;
    timeView.options.specifiedRange = true;
    timeView.options.min = new Date(2024, 0, 1, 9, 00, 00);
    timeView.options.max = new Date(2024, 0, 1, 22, 00, 00);
    timeView._updateRanges();

### Bug report

When the dateInput option is enabled and the format contains the "ddd" format specifier, the DateTimePicker does not display the date format correctly. Also, when a date is selected, the formatting contains "undefined".

### Reproduction of the problem

1. Define a DateTimePicker with enabled "dateInput" and format equals to "ddd dd/MM/yyyy HH:mm".

2. The format is not correct. When you select a date it is not formatted correctly.

The issue occurs when using the DatePicker, as well.

The last working version is 2023.1.425.

Also, when the "dateInput" is disabled, the date format is displayed as expected.

A Dojo sample for reproduction: https://dojo.telerik.com/oxipADUL

### Expected/desired behavior

The date format must be "day of the week day/month/year hours:minutes" (for example, "Wed 24/01/2024 01:00").

### Environment

* **Kendo UI version: 2023.3.1114
* **jQuery version: 3.7.0
* **Browser: [all]

When a Date is already present in the DateTimePicker and the date parts are focused with a mouse click the digits for the year part are cut off.

Reproducable in this Dojo.

Screen recording of the issue.

Bug report

The AM/PM mask of the DataTimePicker is editable.

The behavior might be related to the introduction of the common DateInput package in the DatePickers.

Reproduction of the problem

1. Run the DateTimePicker Demo
2. Select a date in the DateTimePicker
3. Select and delete the AM mask of the selected value

Current behavior

The AM mask gets deleted and is replaced by the default AM/PM

Expected/desired behavior

The AM mask should be non-editable as it isn't part of the value of the Widget.

Environment

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

I noticed that in version 2023.2.606 you introduced some Date Editing enhancements for the DateInput component, like:

• AutoSwitchParts
• AutoSwitchKeys
• AutoCorrectKeys
  etc.

but these options aren't available for other DatePickers that implement the DateInput internally:

@(Html.Kendo().DateTimePicker()
              .Name("datepicker")
              .DateInput()
)

When clicking on the start date input without changing the default date, the drilldown menu closes when selecting the current year. When clicking the date input again, the drilldown menu correctly shows the months of the selected year. The expected behaviour would be to change to the month selection without closing

See this REPL for reference.

Bug report

The translations of the Time- and DateTimePickers are missing from the kendo.messages.en-US.js file although the Creating New Localization Files sections of the docs states that it has all messages and should serve as template for contributors.

Reproduction of the problem

1. Open the kendo.messages.en-US.js file in the Kendo UI Core repo
2. Search for TimePicker or DateTimePicker

Bug report

The DateTimePicker's popup calendar view is cut in the Default, Classic, and Fluent themes.

Reproduction of the problem

1. Run the following dojo
2. Set the sizing option of the widget to large.
3. Open to DatePicker popup.

Current behavior

The Date and Time views in the DateTimePicker popup are trimmed.

Expected/desired behavior

The Date and Time views in the DateTimePicker popup should not be trimmed.

Environment

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

Bug report

The DatePicker TagHelper does not expose the disableDates configuration option.

Reproduction of the problem

When using the DatePicker TagHelper it is not possible to set the disableDates configuration.

Expected/desired behavior

The disableDates configuration should be configurable similar to the HTML Helpers.

Environment

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

Bug report

On mobile device's the TimePicker and DateTimePicker's popup doesn't get scrolled as expected. Instead the entire page is scrolled.

Reproduction of the problem

1. Run the DateTimePicker or TimePicker Demo on a mobile device (test on Safari/Chrome)
2. Open the popup and try to scroll

Current behavior

The page gets scrolled.

Expected/desired behavior

The popup should be scrollable.

TicketID:

1570836

Environment

• Kendo UI version: 2022.6.621
• Browser: [ Mobile Chrome | iOS XX Safari ]

Currently, the new feature .ComponentType('modern') does NOT respect the .Interval(n) setting for the control.

Demo of ComponentType setting on DateTimePicker control

According to the API Reference the Interval setting, Interval

"Specifies the interval, between values in the popup list, in minutes." 

The ComponentType('classic') does respect the Interval setting.  Thus, the ComponentType feature should be updated to respect the Interval setting when the "modern" ComponentType is selected.  The time interval under modern is always 1 minute (see screenshot).

                    @(Html.Kendo().DateTimePicker()
                            .Name("SessionEndDateTime")
                            .Interval(15)
                            .ComponentType("modern")
                            .Events(e => { e.Change("onSessionEndChange"); })
                            .HtmlAttributes(new { style = "width: 100%", title = "Session End Date/Time", @class = "form-control" })
                            .DateInput()
                            )

Modern should respect the Interval setting for the control.

Hey,

It would be very useful if the TimePicker component would have a feature called something like "AutoFocusTime()". By default, when there is no value inside the TimePicker, the default focused time is "12:00 am", therefore the user has to scroll up all the way to the required time. With the feature above, it would be possible to enter a time which should be focused by default. For example "8:00 am" which is when most businesses start operating.

Now the question is, why not just putting in a default value. Well, in a form with lots of inputs, the user may not know anymore which values he entered and which inputs have a default value set and therefore submitting wrong data. If a input doesn't have a default value this mistake can be caught by setting a [Required] attribute. Threfore, the user has to enter a value and it will be guaranteed that all values where entered by him and it wasn't a default value which has been set.

See ticket id 1412837.

Hi,

I'm having an issue with the TimePickerFor control, it doesn't show the time, only a strange format.

When I declare the control:

            @(Html.Kendo().TimePickerFor(m => m.ShiftStartDt)
                .Deferred()
            )

it only shows a forma of "h:mm tt" instead of the time from the model

When I change the control to a datetime picker, it works fine but I don't want to see the date, only the time.

This works:

            @(Html.Kendo().DateTimePickerFor(m => m.ShiftStartDt)
                .Deferred()
            )

I have debugged the model and the data is correct,

        [Display(Name = "Start Time")]
        public DateTime ShiftStartDt { get; set; }

I have even tried changing the model to TimeSpan but it didn't help

I tried setting the format also on the control and using jquery:

        $("#ShiftStartDt").kendoTimePicker({
            format: "HH:mm"
        });

still always shows "h:mm tt" always, no matter what I do

Regards

Raff