Datetimepicker 不更改日期时间 onSelect答案

【问题标题】：Datetimepicker not changing date time onSelectDatetimepicker 不更改日期时间 onSelect
【发布时间】：2014-11-12 14:50:28
【问题描述】：

问题：

我有两个使用 trent richardson's datetimepicker 的 datetimepicker 元素

第一个元素选择开始日期/时间，第二个元素选择结束日期/时间。当更改日期/时间时，我想检查开始事件是否仍然在结束事件之前。如果不是：datetimepicker 应该恢复到以前的值。

我的尝试

$("selector").datetimepicker(function(){
    //other init values.
    onSelect: function(){
         var start = $("#startStamp").val();
         var stop = $("#stopStamp").val();
         if(calculateTimeDiff(start, stop) <= 0){
             alert("Start time may not exceed end time");
             $(this).datetimepicker("setDate",obj.lastVal);
         }

    }
}

calculateTimeDiff() 是一个返回开始日期和结束日期之间的毫秒数的函数。

会发生什么

如果为开始值选择的日期在结束值之后。然后一切都像预期的那样。该值被还原。

但是如果开始值和结束值都在同一日期，并且时间发生更改以超过结束值。然后将日期值设置为当前日期，并且根本不会重置时间值。如果在此之后关闭对话框，则不会向输入字段返回任何值。

当您更改日期和仅更改时间时，我都尝试过 console.log(obj)。并发现仅更改时间时未设置 obj.lasVal 。（我觉得有点奇怪）。

JSFiddle

问题

我做错了什么或者可以通过其他方式完成吗？

【问题讨论】：

标签： jquery datetimepicker

【解决方案1】：

还有更好的方法！您可以使用minDateTime 和maxDateTime 来限制这两个字段，使开始日期最大值为结束日期，结束日期最小值为开始日期，如下所示：

$("#startStamp").datetimepicker({
    dateFormat: "yy-mm-dd",
    timeFormat: "HH:mm",
    showSecond: false,
    controlType: 'select',
    maxDateTime: new Date($('#endStamp').val().replace(/-/g, "/")),
});

$("#endStamp").datetimepicker({
    dateFormat: "yy-mm-dd",
    timeFormat: "HH:mm",
    showSecond: false,
    controlType: 'select',
    minDateTime: new Date($('#startStamp').val().replace(/-/g, "/")),
});

FIDDLE

更新

更新 2

添加了 Safari 的修复。

【讨论】：

感谢您的回答，但您的小提琴不起作用。此外，我认为这个解决方案只支持初始值，而不是用户在初始化后选择的值（但我可能是错的）
小提琴怎么不工作？我什至修复了你的小提琴以使用实际的 CDN，因为 github 不起作用。我的解决方案阻止用户选择超出逻辑范围的日期时间。
它不会阻止用户选择超出范围的日期/时间！当结束日期为 2011-11-09 时，我仍然可以选择 2011-11-10。那应该是不可能的。
我不知道你看到了什么，它是不可选择的，你不能在字段中输入无效的日期。
查看截图并确认您在这个小提琴地址：http://jsfiddle.net/tomanow/xqo2653k/1/

【解决方案2】：

您做错的部分原因是混淆了 datetimepicker 和 datepicker，它们的名称非常相似 :)。 datepicker 有 onSelect (http://api.jqueryui.com/datepicker/#option-onSelect)，但 datetimepicker 没有 (http://eonasdan.github.io/bootstrap-datetimepicker/Events/)。

希望对你有帮助

【讨论】：