jQuery引导时间选择器开始和结束时间

2cmtqfgy  于 2022-11-29  发布在  jQuery
关注(0)|答案(2)|浏览(178)

我有两个时间选择器,第一个是开始时间,第二个是结束时间。
我希望结束时间不超过开始时间。我不希望设置任何默认值,也不希望在开始时用户单击开始时间,结束时间应填充+2小时。然后用户可以更改结束时间,并将其保持为开始时间的最小值,但不能低于该值。
我正在使用source中的引导程序时间选择器
这就是我的计算结果:
我在开始时禁用了结束时间。

$('#end_time_input').prop('disabled', true);
$('#start_time').datetimepicker({
    format: 'HH:mm',
    useCurrent: false,
});

$('#end_time').datetimepicker({
    format: 'HH:mm',
});
$("#start_time").on("dp.change", function (e) {
    $('#end_time_input').prop('disabled', false);
    var date = e.date;
    var d1 = new Date();
    d1.setHours(+date._d.getHours()+2 ); 
    d1.setMinutes(date._d.getMinutes());
    $("#heure_de_rdv_end_input").val(d1.getHours()+":"+d1.getMinutes());
    var start_date = e.date;
    var start_hours = date._d.getHours();
    var start_mins = date._d.getMinutes();
    $('#end_time').data("DateTimePicker").minDate(moment({h:start_hours,m :start_mins}));
});

这在增加时间和第一次点击时不起作用。还有很多小问题。

of1yzvn4

of1yzvn41#

我认为最新版本的datetimepicker有一些bug,下面的代码使用4.17.37版本可以正常工作。
您可以使用useCurrent: false来避免使用默认值,同时可以使用date()来设置end_time选取器上的值,使用minDate()来设置最小可选值。
您可以简单地使用moment add()来获取dp.change列表器中所选日期的 *+2 * 小时。
下面是一个完整的实时示例:
第一个

oalqel3c

oalqel3c2#

对于谁想做同样的事情,但与新版本Datetimepicker(TempusDominus Bootstrap 4)你也可以做分钟的差异如下:
第一个

相关问题