javascriptjquerybootstrap-datetimepicker

How to allow maxDate and minDate to be equal on Bootstrap DateTimePicker?


In order to create a report, I need to be able to choose the same starting and ending date.
I'm able to do that, but only on the first time that I pick the maxDate.
After that I can't pick the same value of the minDate as maxDate.

E.g:
Browser opens up.
I choose 01/01/2020 as starting date (minDate).
I choose 01/01/2020 as ending date (maxDate).
I change ending date to 02/01/2020.
Now I'm unable to pick '01/01/2020' as ending date again.

I need to be able to select the same moment for minDate and maxDate
I can't seem to find a solution for this in the DateTimePicker documentation

I've tried setting some values on the change event:

$(".datetimepickerTo").on("dp.change", function (e) {
    $('.datetimepickerFrom').data("DateTimePicker").maxDate(e.date);
});

And on the datetimepicker selector:

$('.datetimepickerTo').datetimepicker({
    useCurrent: false
});

Solution

  • Turns out it was a date format issue.
    For some reason when selecting dates for the first time, the date output was:

    'Wed Jan 01 2020 16:39:34 GMT-0300 (Horário Padrão de Brasília)'.

    Where '16:39:34' was the actual time that I picked the date.

    Although, on the second time selecting, the output was:

    'Wed Jan 01 2020 00:00:00 GMT-0300 (Horário Padrão de Brasília)'

    Making two different dates.

    My approach was to format the date to the format that I needed. Using this function:

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

    Where the output was:

    01/01/2020

    Then I just had to pass the formatted date to minDate() and maxDate() functions:

    $(".datetimepickerFrom").datetimepicker().on("dp.change", function (e) {
        const formattedDate = formatDate(e.date.toDate())
        $('.datetimepickerTo').data("DateTimePicker").minDate(formattedDate);
    });
    
    $(".datetimepickerTo").datetimepicker().on("dp.change", function (e) {
        const formattedDate = formatDate(e.date.toDate())
        $('.datetimepickerFrom').data("DateTimePicker").maxDate(formattedDate);
    });