Jquery日期时间选择器 - 将时间提前1小时

Question

我目前正在使用来自这里的jQuery datetimepicker插件。

它几乎完美地工作，但是我不知道如何为它添加一点小功能。我在页面上有两个实例，一个用于开始时间，另一个用于结束时间。当我选择开始时间时，我希望自动填写结束时间为开始时间+1小时。

能否在不扩展核心脚本的情况下实现这一点？

- jwBurnside

Answer 1

是的，它扩展了JQuery-UI日期选择器，该选择器具有不同的回调函数来处理选择。

您可以查看onSelect文档并将其用于您的时间选择器。

$('#example').datetimepicker({
    onSelect: function(){
              //add 1 hour to start time
        }
});

- Grooveek

Answer 2

页面底部展示了一个获取和设置日期时间的函数。

var ex13 = $('#example13');

ex13.datetimepicker();

$('#example13_setdt').click(function(){
    ex13.datetimepicker('setDate', (new Date()) );
});

$('#example13_getdt').click(function(){
    alert(ex13.datetimepicker('getDate'));
});

你能用那个吗？当然，你需要在getDate上加一个小时。

$("#endtime").datetimepicker("setDate", $("#starttime").datetimepicker("getDate"));

- Nick Spiers

Answer 3

以下代码将在结束时间日期选择器中增加一小时。

$('#dtStartDate').datetimepicker({
    onSelect: function(){
       var startDate = $('#dtStartDate').datetimepicker('getDate'));
       var endDate = new Date(parseFloat(startDate.setHours(startDate.getHours()+1)))

       //Get the ending date datepart
       var endDateDatePart = endDate.getFullYear() + '/' + endDate.getMonth() + '/' + endDate.getDate();

       //calculate the ending date time part including AM/PM
       var endDateTimePart;
       if (endDate.getHours() > 12) { endDateTimePart = endDate.getHours()-12 + ':' + endDate.getMinutes() + ' PM';} else {endDateTimePart = endDate.getHours() + ':' + endDate.getMinutes() + ' AM';}
       $('#dtEndDate').datetimepicker('setDate', endDateDatePart + ' ' + endDateTimePart );
   }
});

- NakedBrunch

---

好的，我认为它非常接近了，但是在开始时间字段中，有时候时间无法输入到该字段中，导致结果很奇怪。您能看一下吗？// 当选择开始时间时，将结束时间增加一小时。 $(".end").datetimepicker({ampm: true,stepMinute: 10}); $('.start').datetimepicker({ ampm: true,stepMinute: 10,
onSelect: function(){ var start = $('.start').datetimepicker('getDate'); var end = new Date(parseFloat(start.setHours(start.getHours()+1))); $('.end').datetimepicker('setDate', end ); } }); - jwBurnside

如果您删除开始日期选择器的onSelect事件，那么开始时间字段是否每次都会被填充？ - NakedBrunch

尝试将变量startDate更改为var startDate = $(this).datetimepicker('getDate'));，而不是var startDate = $('#dtStartDate').datetimepicker('getDate'));。 - NakedBrunch

不，仍然有同样的错误。第一次选择日期和时间时似乎可以工作，但之后就被禁用了。奇怪。更新 看起来问题出在最后一行代码上： $('.end').datetimepicker('setDate', end ); - jwBurnside

这肯定是最后一行了，$('.end').datetimepicker('setDate', end ); - jwBurnside