是否可以在 Tempus Dominus bootstrap 4 datetimepicker 中将 minDate 和 maxDate 设置为同一天？答案

【问题标题】：Is it possible to set minDate and maxDate to the same day in Tempus Dominus bootstrap 4 datetimepicker?是否可以在 Tempus Dominus bootstrap 4 datetimepicker 中将 minDate 和 maxDate 设置为同一天？
【发布时间】：2019-08-30 16:33:35
【问题描述】：

我正在使用 TempusDominus Bootstrap4 日期时间选择器 (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 天。（即，除使用第一个 datetimepicker 选择的那一天外，所有天都被禁用）

使用上面的代码，我可以选择“今天”作为开始日，然后我可以选择从“今天”到未来几年的任何一天。如果我先选择（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 会破坏日期选择器。

【问题讨论】：

标签： javascript jquery bootstrap-4

【解决方案1】：

看看这个： How to allow maxDate and minDate to be equal

我会说这可能也是日期格式问题。
尝试使用以下格式格式化日期：

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);
});

【讨论】：

【解决方案2】：

好的，我可以解决它，当然有一个更优雅的解决方案，但对于遇到相同问题的任何人：当 e.date.add() 方法中的日期更改时，它会更改所有引用，因此执行 minDate : e.date 然后 maxDate: e.date.add(1,"day") 将 minDate 和 maxDate 设置为完全相同的日期。

我用 clone() 解决了这个问题，然后销毁了 datepicker 并重新启动它

    $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
        });
    });

【讨论】：