Nethra Nethra - 2 years ago 232
Javascript Question

Get the selected Date and Time on KendoDateTimepicker

I am using a kendo DateTimepicker. I have a startdate and end date. when i select a start date i want the end date to be generated 30min more than the start date. For example if the selected start date is 5/11/2016 2.30PM i want the end date to be 5/11/2016 3.00PM.. Can anyone help me with this.


kendo Code:

<label for="start_date" >Start Date</label>
<div data-container-for="data.start_date" onchange="startDate()">
<input data-role="datepicker" data-bind="value: data.start_date" id="startDate"/>
<input data-role="timepicker" data-bind="value: data.start_date" id="startTime"/>
<label for="end_date">End Date</label>
<div data-container-for="data.end_date">
<input data-role="datepicker" data-bind="value: data.end_date" id="endDate" />
<input data-role="timepicker" data-bind="value: data.end_date" id="endTime"/>


function startDate() {
var startDate = kendo.toString($("#startDate").data("kendoDatePicker").value(), 'MM/dd/yyyy');
var startTime = kendo.toString($("#startTime").data("kendoTimePicker").value(), 'hh:mm tt')
var endtDate = kendo.toString($("#endDate").data("kendoDatePicker").value(), 'MM/dd/yyyy');
var endTime = kendo.toString($("#endTime").data("kendoTimePicker").value(), 'hh:mm tt')
var StartDate = new Date($("#startDate").val());
var futureDateTime = new Date(StartDate.setMinutes(StartDate.getMinutes() + 30));
var End = $("#endDate").data("kendoDatePicker").value(futureDateTime);
var EndTime = $("#endTime").data("kendoTimePicker").value(futureDateTime);


Answer Source

Please try with the below code snippet. On click on button you get separate date and time of both datetime pickers.

    <input id="startDate" />
    <input id="endDate" />
    <button onclick="GetDateAndTime();">Get date an time separatly</button>
        function GetDateAndTime() {
            var startDate = kendo.toString($("#startDate").data("kendoDateTimePicker").value(), 'MM/dd/yyyy');
            var startTime = kendo.toString($("#startDate").data("kendoDateTimePicker").value(), 'hh:mm tt')
            var endtDate = kendo.toString($("#endDate").data("kendoDateTimePicker").value(), 'MM/dd/yyyy');
            var endTime = kendo.toString($("#endDate").data("kendoDateTimePicker").value(), 'hh:mm tt')
        $(document).ready(function () {
            var tempDate = new Date();
                value: tempDate,
                change: onchange
                value: tempDate,
            function onchange() {
                var startDate = new Date($("#startDate").val());
                var newDateTime = new Date(startDate.setMinutes(startDate.getMinutes() + 30));

Let me know if any concern.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download