This is a migrated thread and some comments may be shown as answers.

Kendo DateTimePicker - Time appearing up twice in the selection

3 Answers 223 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Aditya
Top achievements
Rank 1
Aditya asked on 19 Dec 2016, 11:40 AM

Hi, 

I am facing an issue with the DateTimePicker where the time in the selection box is appearing up twice.Attached is the image. 

The code that I have done for round off and for setting the max value is below, please let me know where i am going wrong.

Code snippet - 

var currentDate = new Date();
   currentDate.setDate(currentDate.getDate() - 28);
   currentDate.setMinutes(0);
   var startDateTimeElement = $("#start_dateTime");
   startDateTimeElement.kendoDateTimePicker({
       value: currentDate,
       format: "dd/MM/yyyy hh:mm tt",
       culture: "en-GB"
   });
 
   var endDateTimeElement = $("#end_dateTime");
   var endDate = new Date();
   //--rounding off the time to the nearest half an hour
   var mins = endDate.getMinutes();
   var quarterHours = Math.round(mins / 60);
   if (quarterHours === 2) {
       endDate.setHours(endDate.getHours() + 1);
   }
   var rounded = (quarterHours * 60) % 60;
   endDate.setMinutes(rounded);
   //--
 
   endDateTimeElement.kendoDateTimePicker({
       value: endDate,
       format: "dd/MM/yyyy hh:mm tt",
       culture: "en-GB"
   });
 
   startDateTimeElement.kendoDateTimePicker({
       format: "dd/MM/yyyy hh:mm tt",
       culture: "en-GB",
       min: currentDate,
       max: endDateTimeElement.data("kendoDateTimePicker").value(),
       change: function () {
           var selectedDate = startDateTimeElement.data("kendoDateTimePicker").value();
           endDateTimeElement.data("kendoDateTimePicker").min(selectedDate);
       }
   });
 
   endDateTimeElement.kendoDateTimePicker({
       format: "dd/MM/yyyy hh:mm tt",
       culture: "en-GB",
       min: startDateTimeElement.data("kendoDateTimePicker").value(),
       max: endDate,
       change: function () {
           var selectedDate = endDateTimeElement.data("kendoDateTimePicker").value();
           startDateTimeElement.data("kendoDateTimePicker").max(selectedDate);
       }
   });

 

3 Answers, 1 is accepted

Sort by
0
Aditya
Top achievements
Rank 1
answered on 20 Dec 2016, 04:45 AM
Also the link for the issue in the Telerik IDE - http://dojo.telerik.com/ODAqa
0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 22 Dec 2016, 11:10 AM
Hello Aditya,

To achieve the desired behaviour, set the seconds and milliseconds as well:

http://dojo.telerik.com/oTuno

Let me know if you need more help. 

Regards,
Alex Hajigeorgieva
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualisation (charts) and form elements.
0
Aditya
Top achievements
Rank 1
answered on 23 Dec 2016, 08:50 AM
Thanks Alex for the inputs
Tags
Date/Time Pickers
Asked by
Aditya
Top achievements
Rank 1
Answers by
Aditya
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or