Nethra Nethra - 6 months ago 75
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.

Thanks

kendo Code:

<tr>
<td>
<div>
<label for="start_date" >Start Date</label>
</div>
<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"/>
</div>
</td>
<td>
<div>
<label for="end_date">End Date</label>
</div>
<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"/>
</div>
</td>
</tr>


Function:

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

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

<div>
    <input id="startDate" />
    <input id="endDate" />
    <button onclick="GetDateAndTime();">Get date an time separatly</button>
    <script>
        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')
            alert(startDate);
            alert(startTime);
            alert(endtDate);
            alert(endTime);
        }
        $(document).ready(function () {
            var tempDate = new Date();
            $("#startDate").kendoDateTimePicker({
                value: tempDate,
                change: onchange
            });
            $("#endDate").kendoDateTimePicker({
                value: tempDate,
            });
            $("#startDate").data("kendoDateTimePicker").trigger("change");
            function onchange() {
                var startDate = new Date($("#startDate").val());
                var newDateTime = new Date(startDate.setMinutes(startDate.getMinutes() + 30));
                $("#endDate").data("kendoDateTimePicker").value(newDateTime);
            }
        });
    </script>
</div>

Let me know if any concern.

Comments