The different Date/Time Pickers contain of an input field and a button that opens a calendar view in a popup. Usually, the background color of the button changes when it is clicked. In Firefox, nothing happens, because it seems to block the :active pseudo class. This DOJO demonstrates the behavior.
In other, similar input widgets like the NumericTextBox, this problem does not occur, because the .k-selected class is set on the button instead. Still, Firefox blocks the :active pseudo class.
Since R1 2022, the setOptions method re-enables a disabled widget.
Dojo
DateTimePicker controls for selecting a time don't scroll on touch screen devices as of 2022.2.510.
Previously this has worked without any problems, but since we updated to 2022.2.510 the timepicker dropdown list no longer scrolls on touch screen devices, and instead the entire page scrolls, so the user can't select any other times.
We have included the 'kendo.mobile.min.js' and 'kendo.mobile.scroller.min.js' files but this has not resolved the issue.
Hi Kendo Team,
After we updated to version 2022.2.301 we decided to modify our theme by compiling the Metro theme from the source files and adjusting some of the variables provided.
When checking on the styles of the date-time-picker we noticed that the focused column of the time picker would not be highlighted anymore. Also the title would not get the darker color it had in the previous version (see attached image)
We noticed that in v2022.2.301 the focus class has changed from 'k-state-focused' to 'k-focus' (see inspector screenshot)
The styles in the files 'web/common/inputs.less' and 'web/type-metro.less' on the other hand still refer to the class .k-time-list-wrapper..k-state-focused to style title and the ::before and ::after elements that define the background color.
We will add styles to our custom file to correct this. The question for future updates would be though, which class will be the preferred one to keep.
Thanks,
Markus
Hi Team,
I'd like to request adding the Buddhist Calendar to the Kendo UI Date/Time Pickers/Calendar.
Thank you!
Bug report
DateTimePicker modern type cut does not flip popup when there is more space above the input
Reproduction of the problem
Open this example:
https://runner.telerik.io/fullscreen/OnUNodon/2
Resize the window so vertical scrollbar appears
Scroll so the DateTimePicker is below the center of the window
Open the DateTimePicker
Expected/desired behavior
Popup shall be positioned on top of the input
Environment
Kendo UI version: all
Browser: [all]
TicketID 1545933
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.
Bug report
When using the readonly method for the Kendo UI DatePicker when toggling to remove the readonly attribute, the aria-readonly attribute remains.
Reproduction of the problem
- Go to this dojo.
- Inspect the DatePicker element.
- Toggle readonly on and off for the DatePicker.
Current behavior
The aria-readonly attribute is still included in the Kendo UI DatePicker.
Expected/desired behavior
The DatePicker's readonly method should work like the DateTimePicker's method.
Environment
- Kendo UI version: 2021.2.511
Hi,
We are using DatePicker and DateTimePicker with DateInput.
Since Kendo UI 2021 R1 the DatePicker is showing the DateInput mask when the value is null. The DateTimePicker behaves correctly.
I've prepared an example. The value is set to null manually here, but in our code it is set via MVVM binding.
https://dojo.telerik.com/OcaVaWoX
Reproduce:
1. Select Version Kendo 2020 R3: The DatePicker and DateTimePicker are both empty. That's the expected behavior.
2. Select Version Kendo 2021 R1: The DatePicker now incorrectly shows the DateInput mask, the DateTimePicker shows the empty picker correctly.
Best regards
### Bug report
When the Kendo UI DateTimePicker widget with componentType set to 'modern' is used in the filter menu of the Kendo UI Grid and the "Set" button is clicked, the form is submitted automatically.
### Reproduction of the problem
1) Set filterable.ui to be a DateTimePicker with componentType: modern;
2) Open the filter menu. Choose a date from the picker and click "Set";
3) The form is automatically closed/submitted.
A Dojo sample for reproduction (the 3rd column of the grid): https://dojo.telerik.com/ANEFExOC
### Expected/desired behavior
The form should not be automatically closed/submitted.
### Environment
* **Kendo UI version:** 2021.1.119
* **jQuery version:** 1.12.4
* **Browser:** [all]
popup: {
position: 'top right'
}
Bug report
In "modern" style with 24h format, it's not possible select 00 hour but only 24
Reproduction of the problem
Open below Dojo:
https://dojo.telerik.com/AVUPahuS
Open TimePicker and try to Select 00:00
Current behavior
There is no 00:00
Expected/desired behavior
User shall be able to select 00:00 as it is in non-modern type
Environment
Kendo UI version: 2020.2.617 and above
jQuery version: x.y
Browser: [all]
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
- Go to this Progress Kendo UI Dojo.
- 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
Bug report
Updating the dateInput format of the Timepicker via setOptions display number for the seconds part
timepicker._dateInput.setOptions({
format:"HH:mm:ss"
})Reproduction of the problem
Dojo to reproduce: https://dojo.telerik.com/udEQUHar
Expected/desired behavior
The updated format shall receive no number for the seconds part.
the same applies to DatePicker and DateTimepicker.
Environment
Kendo UI version: [all]
Browser: all
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
Current behavior
Component type does not apply in MVVM DateTimePicker
Dojo: https://dojo.telerik.com/eKALEfaN
Expected/desired behavior
Modern component type shall be applied
Current workaround:
Dojo https://dojo.telerik.com/OZaZaDaJ
Environment
Kendo UI version: 2020.2.617
jQuery version: x.y
Browser: [ Chrome XX ]
I was able to duplicate an issue I found when we upgraded to the latest Kendo UI for jQuery release. The DatePicker is not working correctly when the kendo namespace, kendo.ns, is set. I was able to duplicate it using the MVVM demo example for DatePicker. The month is no longer displayed and clicking on the Month to zoom out in time stops working as well. I have not checked what other functionality is not working. I do know the parsing is working properly as well as formatting.
<!DOCTYPE html><html>
<head>
<base href="https://demos.telerik.com/kendo-ui/datepicker/mvvm">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.metroblack.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.metroblack.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
<script src="../content/shared/js/console.js"></script>
<script>
// set the kendo namespace so not to collide with other libraries
kendo.ns = "kendo-";
</script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Choose a date</h4>
<input data-kendo-role="datepicker"
data-kendo-bind="visible: isVisible,
enabled: isEnabled,
value: selectedDate,
events: { change: onChange }"
style="width: 100%">
</div>
<div style="padding-top: 2em;">
<h4>Console</h4>
<div class="console"></div>
</div>
</div>
<div class="box">
<div class="box-col">
<h4>Configuration</h4>
<div>
<label><input type="checkbox" data-bind="checked: isEnabled">Enable</label>
</div>
<div>
<label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
</div>
</div>
<div class="box-col">
<h4>Information</h4>
Kendo UI DatePicker supports the
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/enabled">enabled</a>,
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/value">value</a> and
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
</div>
</div>
<script>
var viewModel = kendo.observable({
selectedDate: null,
isEnabled: true,
isVisible: true,
onChange: function() {
kendoConsole.log("event :: change (" + kendo.toString(this.get("selectedDate"), "D") + ")");
}
});
kendo.bind($("#example"), viewModel);
</script>
</div>
</body>
</html>
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 ]
- Click the 'Calendar' icon button on the date field. The date picker should pop-out.
- Now whilst the date picker if out change the iPad orientation to Landscape mode.
- Check the date field again. Notice that the Calendar icon button has been duplicated.
The Timepicker portion of Date/Timepicker is showing an odd border and the highlight is slicing that border in half when hovering/clicking within the timepicker. I looked at the timepicker only control, and this border is not showing.
I am attaching the 2 the snippets from dojo.telerik.com for each of the 2 controls to show the display difference.