![](/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.