从引导日期时间选择器动态将最小日期传递给jQuery datepicker

Question

I am working on a project, Actually there are two datepickers in my page. One is bootstrap datepicker and another is jQuery datepicker. There are three date fields, one is for start event date and another is for end event. Third datepicker is used to select multiple dates. Now I want that first selected date should work as min date for third datepicker and second datepicker date should work as max date limit for third datepicker. I am not able to pass that values. May be problem arise because of two different datepicker ie one is jQuery datepicker and another is bootstrap datetimepicker. Please give me a solution if you have any idea.

// code of first datepicker

$('.form_start_datetime').datetimepicker({
    //language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    startDate: new Date(), 
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1
 });

// code of second datepicker

 $('.form_end_datetime').datetimepicker({
    //language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    startDate: minDate,
    autoclose: 1, 
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1


});

// code of multiple date select

jQuery(function () {
// var startTime = $('#start_date_time').val();
// var splitTime = startTime.split(" ");

if(jQuery("#multi-datepicker").length){
    jQuery("#multi-datepicker").datepicker({
        format :'yyyy-mm-dd',
        minDate: new Date(2018, 1 - 1, 1),
        onSelect: function (dateText, inst) {
            addOrRemoveDate(dateText);
            $(this).data('datepicker').inline = true;
            $('#multi-datepicker').val(dates);
            //console.log(splitTime[0]);
        },
        onClose: function() {
            $(this).data('datepicker').inline = false;
        },
        beforeShowDay: function (date) {

            var year = date.getFullYear();
            // months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009"
            var month = padNumber(date.getMonth() + 1);
            var day = padNumber(date.getDate());
            // This depends on the datepicker's date format
            var dateString = month + "/" + day + "/" + year;

            var gotDate = jQuery.inArray(dateString, dates);
            if (gotDate >= 0) {
                // Enable date so it can be deselected. Set style to be highlighted
                return [true, "ui-state-highlight"];
            }
            // Dates not in the array are left enabled, but with no extra style
            return [true, ""];
        }

    });

Thanks you in advance

Answer 1

In order to achieve the wanted result, you can set the minDate and maxDate of a datepicker inside the onSelect of another datepicker.

Exaple:

$('.form_start_datetime').datetimepicker({

    //language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    startDate: new Date(), 
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1,
    onSelect: function() {
        var minDate = $(this).datepicker('getDate'); //get the selected date
        $("#multi-datepicker").datepicker( "option", "minDate", minDate); //sets min date for datepicker
    }
 });

$('.form_end_datetime').datetimepicker({

    //language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    startDate: new Date(), 
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1,
    onSelect: function() {
        var maxDate= $(this).datepicker('getDate'); //get the selected date
        $("#multi-datepicker").datepicker( "option", "maxDate", maxDate); //sets max date for datepicker
    }
 });