jQueryUi datepicker 设置 maxDate 并禁用后续日期

Question

var minDate = new Date(today.getFullYear(), today.getMonth() -2 , +1); 
var lastDate = new Date(today.getFullYear(), today.getMonth(), 0);

$('#datepicker_start').datepicker({
         dateFormat: 'd-M-y' ,
         minDate: minDate,
         maxDate: lastDate,
         onSelect: function(selected) {
              $("#datepicker_end").datepicker("option","minDate", selected)
            }

    });


$('#datepicker_end').datepicker({
        dateFormat: 'd-M-y' ,
        minDate: minDate,
        maxDate: lastDate,
        onSelect: function(selected) {
               $("#datepicker_start").datepicker("option","maxDate", selected)
            }
    });


<b>Start Date</b><input name="start_date" type="text" id="datepicker_start" size="15" readonly>
<b>End Date</b><input name="end_date" type="text" id="datepicker_end" size="15" readonly>

我可以 select 当前月份和上个月的任何日期，但如何将 maxDate 设置为 select 日期后的 31 天？

在下面尝试禁用小于 select 当前日期的日期。

beforeShowDay: function (date) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [selectedDateRange.indexOf(dateString) == -1];
}

其中 selectedDateRange 包含当前月份的日期

 maxDate: "+30D",

如何使用 beforeShowDay 将 jquery ui 日期选择器上的 maxDate 设置为从日期 select 开始最多 31 天，以便禁用后续日期？

编辑

$('#datepicker_start').datepicker({
         dateFormat: 'd-M-y' ,
         minDate: minDate,
         maxDate: lastDate,
         onSelect: function(selected) {
              $("#datepicker_end").datepicker("option","minDate", selected)


                    var date=new Date($(this).datepicker('getDate'));
                    day=date.getDate()+30;
                    var month=date.getMonth()+1;
                    var year=date.getFullYear();

                    if(day>31)
                    {
                        day=day-30;
                        month=month+1;
                    }
                    if(month>12)
                    {
                        month=month-12;
                        year=year+1;
                    }
                    newDate=month + "/" + day + "/" + year;

          $("#datepicker_end").datepicker("option","maxDate", newDate);
          $("#datepicker_end").datepicker("option","minDate", date);
            }
    });

     $('#datepicker_end').datepicker({
        dateFormat: 'd-M-y' ,
        //minDate: minDate,
        //maxDate: lastDate,
        onSelect: function(selected,inst) {
               //$("#datepicker_start").datepicker("option","maxDate", selected)
            }
    });

在禁用模式下仍然不显示日期。尽管获取的日期值是正确的

代码更新

$('#datepicker_start').datepicker({
         dateFormat: 'd-M-y' ,
         minDate: minDate,
         maxDate: lastDate,
         onSelect: function(selected) {
                    //code to allow only next 30 days
                    var date=new Date(selected);
                    day=date.getDate()+31;
                    console.log(day);
                    var month=date.getMonth()+1;
                    var year=date.getFullYear();
                    if(day>=31){
                        day=day-31;
                        month=month+1;
                    }
                    if(month>12){
                        month=month-12;
                        year=year+1;
                    }

                    monthVar=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
                    if(day<10)
                        day=0+''+day;
                        newDate=day + "-" + monthVar[month-1] + "-" +  year.toString().substr(2,2);
                    $("#datepicker_end").datepicker("option","maxDate", newDate);
                    $("#datepicker_end").datepicker("option","minDate", date);
        },
    });

     $('#datepicker_end').datepicker({
        dateFormat: 'd-M-y' ,
        minDate: minDate,
        maxDate: lastDate,
        onSelect: function(selected) {
               $("#datepicker_start").datepicker("option","maxDate", selected)
            },
    });

`

Answer 1

您可以按照以下方式进行：

DEMO

$("#datepicker_start").datepicker({
        numberOfMonths: 2,
        onSelect: function(selected) {
           var date=new Date(selected);
            var max=2;
            day=date.getDate()+30;
            var month=date.getMonth()+1;
            var year=date.getFullYear();

            if(day>31)
            {
                day=day-30;
                month=month+1;
            }
            if(month>12)
            {
                month=month-12;
                year=year+1;
            }
            newDate=month + "/" + day + "/" + year;

          $("#datepicker_end").datepicker("option","minDate", newDate);

        }
});

编辑：

$("#datepicker_start").datepicker({
        numberOfMonths: 2,
        onSelect: function(selected) {
           var date=new Date(selected);
            var max=2;
            day=date.getDate()+30;
            var month=date.getMonth()+1;
            var year=date.getFullYear();

            if(day>31)
            {
                day=day-30;
                month=month+1;
            }
            if(month>12)
            {
                month=month-12;
                year=year+1;
            }
            newDate=month + "/" + day + "/" + year;

          $("#datepicker_end").datepicker("option","maxDate", newDate);
          $("#datepicker_end").datepicker("option","minDate", date);
       }
});

UPDATED DEMO

编辑 2

下面的代码以您指定的格式工作，选择开始日期的问题也解决了！！问题是当您将 maxDate 设置为 endDate 时，您应该遵循与在 datepicker

中指定的格式相同的格式

 $("#datepicker_start").datepicker({
        dateFormat:'d-M-y',
        numberOfMonths: 2,
        onSelect: function(selected) {
           var date=new Date(selected);

            var max=2;
            day=date.getDate()+30;
            var month=date.getMonth()+1;
            var year=date.getFullYear();

            if(day>=31)
            {
                day=day-30;
                month=month+1;
            }
            if(month>12)
            {

                month=month-12;
                year=year+1;
            }
            monthVar=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

            newDate=day-9 + "/" + monthVar[month-1] + "/" +  year.toString().substr(2,2);

          $("#datepicker_end").datepicker("option","maxDate", newDate);
          $("#datepicker_end").datepicker("option","minDate", date);
      }
});

UPDATED DEMO 2

编辑 3 [希望这是最终编辑 ;)]

UPDATED DEMO 3

我传递的是 1/Apr/15 格式而不是 1-Apr-15，您可以在下面的代码中找到更改！！

 $("#datepicker_start").datepicker({
        dateFormat:'d-M-y',
        numberOfMonths: 2,
        onSelect: function(selected) {
           var date=new Date(selected);

            var max=2;
            day=date.getDate()+31;
            var month=date.getMonth()+1;
            var year=date.getFullYear();
            console.log(day);
            if(day>=31)
            {
                day=day-31;
                month=month+1;
            }
            if(month>12)
            {

                month=month-12;
                year=year+1;
            }
            monthVar=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
            if(day<10)
                day=0+''+day;
            newDate=day + "-" + monthVar[month-1] + "-" +  year.toString().substr(2,2);
            console.log(newDate);

          $("#datepicker_end").datepicker("option","maxDate", newDate);
            $("#datepicker_end").datepicker("option","minDate", date);

        }
});

jQueryUi datepicker 设置 maxDate 并禁用后续日期

jQueryUi datepicker set maxDate and disable subsequent dates

jquery

date

jquery-ui-datepicker