在 KendoDateTimepicker 上获取选定的日期和时间答案

【问题标题】：Get the selected Date and Time on KendoDateTimepicker在 KendoDateTimepicker 上获取选定的日期和时间
【发布时间】：2016-05-11 21:42:18
【问题描述】：

我正在使用剑道 DateTimepicker。我有一个开始日期和结束日期。当我选择开始日期时，我希望生成的结束日期比开始日期多 30 分钟。例如，如果选择的开始日期是 2016 年 5 月 11 日下午 2 点 30 分，我希望结束日期是 2016 年 5 月 11 日下午 3 点。任何人都可以帮我解决这个问题。

谢谢

剑道代码：

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

    }

【问题讨论】：

您在哪里创建日期选择器？ $("#start") 只是一个标签，所以 $("#start").data("kendoDatePicker") 可能是 null 或 undefined
html部分创建剑道日期选择器
抱歉，我将 $("start") 添加到日期选择器但仍然无法正常工作
你能把代码贴在你实际的 aspx/ascx/cshtml 中吗？在页面已经呈现之后，这似乎是一个转储。像这里展示的东西会很棒demos.telerik.com/kendo-ui/datepicker/index
这是他更新的代码，我将选定的开始日期值传递给 Datepicker 变量，但我们如何将其分配给结束日期

标签： jquery kendo-ui datepicker kendo-grid kendo-datetimepicker

【解决方案1】：

请尝试使用以下代码 sn-p。单击按钮后，您将获得两个日期时间选择器的单独日期和时间。

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

如果有任何问题，请告诉我。

【讨论】：

谢谢它的工作...最初，当开始时间是上午 12 点时，结束时间是上午 12 点 30 分，但是当我将时间更改为上午 1 点时，就我的 sn-p 而言，时间不会更改为上午 1 点 30 分和你的功能
你能提供同样的小提琴吗？所以我可以重现你的问题。
我添加了图像并更新了功能，您可以检查它无法使用数据制作小提琴
Jayesh，如果你要复制和粘贴我的代码，我希望你要么说你这样做了，要么只是修改我的代码以满足要求。做你正在做的事情并不好看。我相信这是我第二次看到你这样做了。

【解决方案2】：

参考这个。您粘贴的页面仍然不是我想要的。

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>

【讨论】：

如果可能的话，你能帮我分别检索日期和时间吗？正在添加日期，但没有添加时间。
' 函数 startChange() { var currentDate = new Date(); var Start = $("#start").data("kendoDatePicker").value(); var StartTime = $("#starttime").data("kendoTimePicker").value(); var futureDateTime = new Date(Start.setMinutes(Start.getMinutes() + 30)); var End = $("#end").data("kendoDatePicker").value(futureDateTime); var EndTime = $("#endtime").data("kendoTimePicker").value(futureDateTime); }'