javascript - 从 bootstrap datetimepicker 动态地将最小日期传递给 jQuery datepicker

Question

我正在开发一个项目，实际上我的页面中有两个日期选择器。一个是 bootstrap datepicker，另一个是 jQuery datepicker。共有三个日期字段，一个用于开始事件日期，另一个用于结束事件日期。第三个日期选择器用于选择多个日期。现在我希望第一个选定的日期应作为第三个日期选择器的最小日期，第二个日期选择器的日期应作为第三个日期选择器的最大日期限制。我无法传递这个值(value)观。可能会因为两个不同的日期选择器而出现问题，即一个是 jQuery datepicker，另一个是 bootstrap datetimepicker。如果您有任何想法，请给我一个解决方案。

//第一个日期选择器的代码

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

//第二个日期选择器的代码

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


});

//多个日期选择代码

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, ""];
        }

    });

提前谢谢您

Answer 1

为了达到想要的结果，您可以在另一个日期选择器的onSelect内设置一个日期选择器的minDate和maxDate。

示例:

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