我有两个时间选择器,第一个是开始时间,第二个是结束时间。
我希望结束时间不超过开始时间。我不希望设置任何默认值,也不希望在开始时用户单击开始时间,结束时间应填充+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}));
});
这在增加时间和第一次点击时不起作用。还有很多小问题。
2条答案
按热度按时间of1yzvn41#
我认为最新版本的datetimepicker有一些bug,下面的代码使用
4.17.37
版本可以正常工作。您可以使用
useCurrent: false
来避免使用默认值,同时可以使用date()
来设置end_time
选取器上的值,使用minDate()
来设置最小可选值。您可以简单地使用moment
add()
来获取dp.change
列表器中所选日期的 *+2 * 小时。下面是一个完整的实时示例:
第一个
oalqel3c2#
对于谁想做同样的事情,但与新版本Datetimepicker(TempusDominus Bootstrap 4)你也可以做分钟的差异如下:
第一个