Please help me. I encountered a very strange behavior of the kendoDateTimePicker widget.
When i'm using kendoDateTimePicker widget as editor in kendoGrid, and click on clock icon, this widget show me string "01.01.1900" before time part in drop-down list (see attached picture).
For example:
...
"01.01.1900 4:30" instead of "4:30"
"01.01.1900 5:00" "5:00"
...
My source code is:
When i'm using kendoDateTimePicker widget as editor in kendoGrid, and click on clock icon, this widget show me string "01.01.1900" before time part in drop-down list (see attached picture).
For example:
...
"01.01.1900 4:30" instead of "4:30"
"01.01.1900 5:00" "5:00"
...
My source code is:
<div id="grid"></div><script type="text/javascript"> $(document).ready(function () { kendo.culture("ru-RU"); var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:6356/admin/GetUnitTogglesList" }, update: { url: "http://localhost:6356/admin/UpdateUnitToggles" }, destroy: { url: "http://localhost:6356/admin/DeleteUnitToggles" }, create: { url: "http://localhost:6356/admin/CreateUnitToggle" } }, batch: true, schema: { model: { fields: { Date: { type: "date" }, UnitId: { type: "number" }, Connect: { type: "boolean" } } } } }); dataSource.read(); $("#grid").kendoGrid({ dataSource: dataSource, navigatable: true, pageable: false, sortable: true, toolbar: ["create", "save", "cancel"], columns: [ { field: "Date", title: "Date", template: '#= kendo.toString(Date, "dd.MM.yyyy H:mm") #', editor: timeEditor }, { field: "UnitId", title: "Unit" }, { field: "Connect", title: "Status" } ], editable: true }); }); function timeEditor(container, options) { $('<input name="' + options.field + '"/>') .appendTo(container) .kendoDateTimePicker({ format: "dd.MM.yyyy H:mm", timeFormat: "H:mm" }); }</script>6 Answers, 1 is accepted
0
Eugeny
Top achievements
Rank 1
Rank 1
answered on 19 Jul 2012, 11:59 AM
I think this is bug.
It seems, format option used instead of timeFormat (when DateTimePicker use as editor in Grid).
It seems, format option used instead of timeFormat (when DateTimePicker use as editor in Grid).
0
Doug
Top achievements
Rank 1
Rank 1
answered on 23 Jul 2012, 06:22 PM
I can confirm this as well. I agree that it seems the format option is being used in lieu of the timeFormat option when used inside of a grid. Can a Telerik person confirm this and let us know if there is a workaround?
0
Hello,
Please note that you need to override the prototype before DateTimePickers initialization.
Regards,
Georgi Krustev
the Telerik team
Thank you for drawing our attention to this issue. We confirm it as a bug, which is already addressed and the fix will be available in the next internal build. For now you will need to override setOptions method of the DateTimePicker:
kendo.ui.DateTimePicker.fn.setOptions = function (options) { var that = this, dateViewO = that.dateView.options, timeViewO = that.timeView.options; Widget.fn.setOptions.call(that, options); normalize(that.options); options = that.options; extend(dateViewO, options, { change: dateViewO.change, close: dateViewO.close, open: dateViewO.open }); extend(timeViewO, options, { format: options.timeFormat, change: timeViewO.change, close: timeViewO.close, open: timeViewO.open }); that.timeView.ul[0].innerHTML = ""; };Please note that you need to override the prototype before DateTimePickers initialization.
Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Eugeny
Top achievements
Rank 1
Rank 1
answered on 24 Jul 2012, 12:33 PM
Thanks for help, Georgi.
But for me, your workaround has solved one problem, but has caused a some others. For example, now, inline editor (DateTimePicker widget) is not closed automatically, when I finish entering value, and move to another field to edit (see attached picture).
But for me, your workaround has solved one problem, but has caused a some others. For example, now, inline editor (DateTimePicker widget) is not closed automatically, when I finish entering value, and move to another field to edit (see attached picture).
0
Hi,
Here is an image, which shows how to use the code snippet.
Kind regards,
Georgi Krustev
the Telerik team
The code snippet from my last answer will throw JS exception if it is used outside of the kendo.datetimepicker.js. I modified the code in order to be able to override the function outside of the JS file:
kendo.ui.DateTimePicker.fn.setOptions = function (options) { var that = this, dateViewO = that.dateView.options, timeViewO = that.timeView.options; kendo.ui.Widget.fn.setOptions.call(that, options); var parseFormats = options.parseFormats; kendo.calendar.normalize(options); parseFormats = $.isArray(parseFormats) ? parseFormats : [parseFormats]; parseFormats.splice(0, 0, options.format); options.parseFormats = parseFormats; options = that.options; $.extend(dateViewO, options, { change: dateViewO.change, close: dateViewO.close, open: dateViewO.open }); $.extend(timeViewO, options, { format: options.timeFormat, change: timeViewO.change, close: timeViewO.close, open: timeViewO.open }); that.timeView.ul[0].innerHTML = ""; }Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Eugeny
Top achievements
Rank 1
Rank 1
answered on 01 Aug 2012, 01:24 PM
Thanks for your solution, Georgi. Now all works!