Is there a way to set maxDate or minDate with a function in bootstrap datapicker?

Question

I am looking for something very simple to me but I did not find it in here and in bootstrap datetimepicker documentations as well.

The idea is very simple. I have two datetime fields which currently will have values at the page_load retrieved from the server.

Now I want to make sure that the maxDate of the first date is the second date value and the minDate of the second date is the date of the first field.

Here is my code:

$(document).ready(function () {
$('[id^="datetimepickerStartDate"]').datetimepicker({
    useCurrent: false,
    format: applicationDateTimeFormat,
    ignoreReadonly: true,
    //maxDate: function() {
    //    var id = $(this).attr('id');
    //    var str = id.split("_");
    //    if (str.length <= 1) {
    //        var secondDateTimePicker1 = $('#datetimepickerFinishDate').data("DateTimePicker").date();
    //        if (secondDateTimePicker1.length) {
    //            return secondDateTimePicker1; 
    //        }
    //        return null;
    //    } else {
    //        var secondDateTimePicker2 = $("#datetimepickerFinishDate_" + str[1]).data("DateTimePicker").date();
    //        if (secondDateTimePicker2.length) {
    //            return secondDateTimePicker2;
    //        }
    //        return null;
    //    }
    //},
    locale: locale
});
$('[id^="datetimepickerFinishDate"]').datetimepicker({
    useCurrent: false,
    format: applicationDateTimeFormat,
    ignoreReadonly: true,
    //minDate: function () {
    //    var id = $(this).attr('id');
    //    var str = id.split("_");
    //    if (str.length <= 1) {
    //        var secondDateTimePicker1 = $('#datetimepickerStartDate').data("DateTimePicker").date();
    //        if (secondDateTimePicker1.length) {
    //            return secondDateTimePicker1;
    //        }
    //        return null;
    //    } else {
    //        var secondDateTimePicker2 = $("#datetimepickerStartDate_" + str[1]).data("DateTimePicker").date();
    //        if (secondDateTimePicker2.length) {
    //            return secondDateTimePicker2;
    //        }
    //        return null;
    //    }
    //},
    //minDate: new Date().setHours(0, 0, 0, 0),
    locale: locale
});
$('[id^="datetimepickerStartDate"]')
    .on("dp.change",
    function (e) {
        var id = $(this).attr('id');
        var str = id.split("_");
        if (str.length <= 1) {
            $('#datetimepickerFinishDate').data("DateTimePicker").minDate(e.date);
        } else {
            $("#datetimepickerFinishDate_" + str[1]).data("DateTimePicker").minDate(e.date);
            $(id).datetimepicker('hide');
        }
    });

$('[id^="datetimepickerFinishDate"]')
    .on("dp.change",
    function (e) {
        var id = $(this).attr('id');
        var str = id.split("_");
        if (str.length <= 1) {
            $('#datetimepickerStartDate').data("DateTimePicker").maxDate(e.date);
        } else {
            $("#datetimepickerStartDate_" + str[1]).data("DateTimePicker").maxDate(e.date);
            $(id).datetimepicker('hide');
        }
        $(id).datetimepicker('hide');
    });
});

Its a lot of code but what I am looking for is a way how can I set those rules at the first open of the datetimepicker. So, I thought to execute e function on the property maxDate and minDate but seemed to not work!

Any idea how to solve this issue ?

The dp.change event works only when the the date is changed for the first time...

Answer 1

you are over-complexing this, what you are looking is basically: 1) The maxDate for the first picker is the one selected on the second picker. 2) The minDate to be selected on the second picker is the one that has the first picker.

So, there is an example on the official page as: http://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

But as you have values on the load of your page, I have this general script:

function AplicarLinkedDatePicker() {
    var $Min = $('.datetimepickerMin');
    var $Max = $('.datetimepickerMax');

    var valInputMax = $Max.children(':input').val();
    var valInputMin = $Min.children(':input').val();

    var format = 'DD/MM/YYYY';

    $Min.datetimepicker({
        format: format,
        useCurrent: false,

    });

    $Max.datetimepicker({
        format: format,
        useCurrent: false,
    });

    $Min.on("dp.change", function (e) {
        $Max.data("DateTimePicker").minDate(e.date);
    });

    $Max.on("dp.change", function (e) {
        $Min.data("DateTimePicker").maxDate(e.date);
    });

    if (valInputMin != null) {
        $Max.data("DateTimePicker").minDate(moment(valInputMin, format).startOf('day'));
    }

    if (valInputMax != null) {
        $Min.data("DateTimePicker").maxDate(moment(valInputMax, format).endOf('day'));
    }


}

So what that all above do? It will be checking if does has a value the input related to the picker and set the respective minDate and maxDate, and if not It will be ignored and let by default.