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

Question

i'm using TempusDominus Bootstrap4 DateTime Picker ( https://tempusdominus.github.io/bootstrap-4/ ). I only have 2 simple inputs in HTML which are these

<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>    

and this in 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);
  });

In my system i need to manage reservations that should start and finish the same day, so i want to limit the second datepicker (#datepicker8) so the minDate property is set to the same date selected in the first datepicker (#datepicker7) and the maxDate property to 1 day more. (ie, all days disabled except the one picked with the first datetimepicker)

With the code above i can pick as start day "today" and then i'm able to select any day from "today" to years to come. If i select first let's say (DD/MM/YYYY) 11/09/2019 14:00 i can then select 11/09/2019 14:30 or 15:00 with no problems. But when i try to modify the maxDate of the 2nd datepicker it doesn't works

I already try this:

$horaInicio.on("change.datetimepicker", function (e) {

    $horaFin.datetimepicker('minDate',e.date);
    $horaFin.datetimepicker('maxDate', e.date.add(1,'day');

  });

but it doesn't work, i cannot select any day with the 2nd datetimepicker. Since i add 1 day from today to the maxDate, that day appears as enabled but i cannot select it, clicking it does nothing. I have no errors showing up. It seems like setting minDate and maxDate brokes the datepicker.

Answer 1

Check out this: How to allow maxDate and minDate to be equal

I would say that this is probably also a date format issue.
Try formatting the date using:

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

Then set the formatted date as parameters to minDate and maxDate functions:

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

Or even maybe:

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

Answer 2

Ok, i could resolve it, for sure there is a more elegant solution but for anyone there having the same problem: when the date changes in e.date.add() method, it changes all the references, so doing minDate: e.date and then maxDate: e.date.add(1,"day") sets minDate and maxDate to the exact same date.

I solved it with a clone() and then destroying the datepicker and re-initiating it

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