Получить выбранную дату и время на KendoDateTimepicker

Я использую кендо DateTimepicker. У меня есть дата начала и дата окончания. когда я выбираю дату начала, я хочу, чтобы дата окончания была сгенерирована на 30 минут больше, чем дата начала. Например, если выбрана дата начала 11.05.2016, 14:30, я хочу, чтобы дата окончания была 11.05.2016, 15:00. Может ли кто-нибудь помочь мне с этим.

Спасибо

код кендо:

 <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);

    }

datepicker jquery kendo-grid kendo-ui kendo-datetimepicker
person Nethra    schedule 11.05.2016    source источник
comment
Где вы создаете свой datepicker? $(#start) — это просто метка, поэтому $(#start).data(kendoDatePicker), вероятно, имеет значение null или undefined   -  person KSib    schedule 12.05.2016
comment
Часть html создает средство выбора даты кендо   -  person Nethra    schedule 12.05.2016
comment
Извините, я добавил $(start) в средство выбора даты, но все еще не работает   -  person Nethra    schedule 12.05.2016
comment
Можете ли вы опубликовать код в вашем реальном aspx/ascx/cshtml? Это похоже на дамп после того, как страница уже отрендерилась. Что-то вроде показанного здесь было бы отлично demos.telerik.com/kendo-ui/datepicker/index   -  person KSib    schedule 12.05.2016
comment
вот он обновленный код, я получаю выбранное значение даты начала для переменной Datepicker, но как мы назначим это дате окончания   -  person Nethra    schedule 12.05.2016

Ответы (2)


arrow_upward
3
arrow_downward

Пожалуйста, попробуйте с приведенным ниже фрагментом кода. При нажатии на кнопку вы получаете отдельную дату и время обоих средств выбора даты и времени.

<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>

Дайте мне знать, если есть какие-либо опасения.

person Jayesh Goyani    schedule 12.05.2016
comment
Спасибо, это сработало ... изначально, когда время начала 12:00, время окончания 12:30, но когда я меняю время на 1:00, время не меняется на 1:30 в моем случае с моим фрагментом и вашей функцией - person Nethra; 12.05.2016
comment
Не могли бы вы предоставить скрипку для того же? Так что я могу воспроизвести вашу проблему. - person Jayesh Goyani; 12.05.2016
comment
Я добавил изображение и обновил функцию, можете ли вы проверить, что она не может сделать скрипку, поскольку она использует данные - person Nethra; 12.05.2016
comment
Джайеш, я бы предпочел, чтобы, если вы собираетесь копировать и вставлять мой код, вы либо сказали, что сделали это, либо просто изменили мой код, чтобы он соответствовал требованиям. Нехорошо делать то, что ты делаешь. Кажется, я уже второй раз вижу, как ты это делаешь. - person KSib; 16.05.2016

arrow_upward
0
arrow_downward

Ссылка на это. Страница, которую вы вставили, все еще не совсем то, что я искал.

http://dojo.telerik.com/IcENe

     <!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datepicker/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />

<script src="//kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="example">
        <div class="demo-section k-content">

            <h4>Start Date:</h4>
            <input id="startDate" value="10/10/2011" style="width: 100%" />

            <h4>End Date:</h4>
            <input id="endDate" value="10/10/2011" style="width: 100%" />
            </p>
        </div>
    <script>
        $(document).ready(function() {
           // current date
          var currentDate = new Date();

            // create DatePicker from input HTML element
            $("#startDate").kendoDateTimePicker({
                 value: currentDate,
               change: onStartDateChange
            });

            // Set new datetime 30 minutes ahead
            var futureDateTime = new Date(currentDate.setMinutes(currentDate.getMinutes() + 30));
            $("#endDate").kendoDateTimePicker({
                // display month and year in the input
                value: futureDateTime,
            });

            function onStartDateChange() {
                //console.log("Change event :: " + kendo.toString(this.value()));

                // Get start date
                var startDate = new Date($("#startDate").val());
                //console.log("Start date :: " + kendo.toString(startDate));

                // Add 30 minutes
                var futureDateTime = new Date(startDate.setMinutes(startDate.getMinutes() + 30));
                //console.log("Future date :: " + kendo.toString(futureDateTime));

                // Set time 30 minutes from now
                    $("#endDate").data("kendoDateTimePicker").value(futureDateTime);
            }

        });
    </script>
    </div>
</body>
</html>
person KSib    schedule 11.05.2016
comment
Можете ли вы помочь мне получить дату и время отдельно, если это возможно. Дата добавляется, но не время. - person Nethra; 12.05.2016
comment
' function startChange() { var currentDate = new Date(); var Start = $(#start).data(kendoDatePicker).value(); var StartTime = $(#starttime).data(kendoTimePicker).value(); var futureDateTime = новая дата (Start.setMinutes (Start.getMinutes() + 30)); var End = $(#end).data(kendoDatePicker).value(futureDateTime); var EndTime = $(#endtime).data(kendoTimePicker).value(futureDateTime); }' - person Nethra; 12.05.2016