![](/img/trans.png)
[英]How to set minDate and maxDate for bootstrap datetimepicker on change
[英]Is it possible to set minDate and maxDate to the same day in Tempus Dominus bootstrap 4 datetimepicker?
我正在使用 TempusDominus Bootstrap4 DateTime Picker ( https://tempusdominus.github.io/bootstrap-4/ )。 我在 HTML 中只有 2 个简单的输入,它们是这些
<div class='mb-3'>
<input type="text" class="form-control datetimepicker-input" id="datetimepicker7" data-toggle="datetimepicker" data-target="#datetimepicker7" readonly="readonly"/>
</div>
<div class='mb-3'>
<input type="text" class="form-control datetimepicker-input" id="datetimepicker8" data-toggle="datetimepicker" data-target="#datetimepicker8" readonly="readonly"/>
</div>
这在jquery中
var $horaInicio = $('#datetimepicker7');
var $horaFin = $('#datetimepicker8');
$horaInicio.datetimepicker({
useCurrent: false,
locale:'es',
daysOfWeekDisabled: [0,6],
minDate: moment(),
autoClose: true,
ignoreReadonly: true,
});
$horaFin.datetimepicker({
useCurrent: false,
locale: 'es',
daysOfWeekDisabled: [0,6],
ignoreReadonly: true,
minDate: moment(),
autoClose: true,
});
$horaInicio.on("change.datetimepicker", function (e) {
$horaFin.datetimepicker('minDate',e.date);
});
$horaFin.on("change.datetimepicker", function (e) {
$horaInicio.datetimepicker('maxDate', e.date);
});
在我的系统中,我需要管理应该在同一天开始和结束的预订,因此我想限制第二个日期选择器 (#datepicker8),以便将 minDate 属性设置为在第一个日期选择器 (#datepicker7) 和maxDate 属性增加了 1 天。 (即,除了第一个日期时间选择器选择的那一天之外,所有日子都被禁用)
使用上面的代码,我可以选择“今天”作为开始日,然后我可以选择从“今天”到未来几年的任何一天。 如果我先选择 (DD/MM/YYYY) 11/09/2019 14:00 然后我可以选择 11/09/2019 14:30 或 15:00 没有问题。 但是当我尝试修改第二个日期选择器的 maxDate 时它不起作用
我已经尝试过这个:
$horaInicio.on("change.datetimepicker", function (e) {
$horaFin.datetimepicker('minDate',e.date);
$horaFin.datetimepicker('maxDate', e.date.add(1,'day');
});
但它不起作用,我无法使用第二个日期时间选择器选择任何一天。 由于我从今天起将 1 天添加到 maxDate,那一天显示为已启用但我无法选择它,单击它什么也不做。 我没有出现错误。 似乎设置 minDate 和 maxDate 破坏了日期选择器。
看看这个: 如何允许 maxDate 和 minDate 相等
我想说这可能也是一个日期格式问题。
尝试使用以下格式格式化日期:
function formatDate(date) {
var months = [
"1", "2", "3",
"4", "5", "6",
"7", "8", "9",
"10", "11", "12"
];
var day = date.getDate();
var monthIndex = date.getMonth();
var year = date.getFullYear();
return day + '/' + months[monthIndex] + '/' + year;
}
然后将格式化日期设置为 minDate 和 maxDate 函数的参数:
$horaInicio.on("change.datetimepicker", function (e) {
let formattedDate = formatDate(e.date.toDate());
$horaFin.datetimepicker('minDate', formattedDate);
});
$horaFin.on("change.datetimepicker", function (e) {
let formattedDate = formatDate(e.date.toDate());
$horaInicio.datetimepicker('maxDate', formattedDate);
});
或者甚至可能:
$horaInicio.on("dp.change", function (e) {
let formattedDate = formatDate(e.date.toDate());
$horaFin.data("DateTimePicker").minDate(formattedDate);
});
$horaFin.on("dp.change", function (e) {
let formattedDate = formatDate(e.date.toDate());
$horaInicio.data("DateTimePicker").maxDate(formattedDate);
});
好的,我可以解决它,当然有一个更优雅的解决方案,但对于任何有同样问题的人:当 e.date.add() 方法中的日期更改时,它会更改所有引用,因此执行 minDate: e. date 和 maxDate: e.date.add(1,"day") 将 minDate 和 maxDate 设置为完全相同的日期。
我用 clone() 解决了它,然后销毁了日期选择器并重新启动它
$horaInicio.on("change.datetimepicker", function(e) {
let fecha = e.date.clone();
$horaFin.datetimepicker("destroy");
$horaFin.datetimepicker({
useCurrent: false,
locale: "es",
daysOfWeekDisabled: [0, 6],
ignoreReadonly: true,
minDate: fecha,
maxDate: e.date.add(1, "day"),
autoClose: true
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.