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

【问题标题】：jQueryUi datepicker set maxDate and disable subsequent datesjQueryUi datepicker 设置 maxDate 并禁用后续日期
【发布时间】：2023-03-25 06:05:01
【问题描述】：

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>

我可以选择当前和上个月的任何日期，但如何将 maxDate 设置为 31 从所选日期起的天数？

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

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

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

 maxDate: "+30D",

如何将 jquery ui datepicker 上的 maxDate 设置为从使用 beforeShowDay 选择的日期起最多 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)
            },
    });

【问题讨论】：

在#datepicker_start 中的onSelect 之后$("#datepicker_end").datepicker("option","minDate", selected) 是从哪里来的！！您是否检查了我在答案中提供的演示？？？尝试评论dateFormat一次！！让我知道！
@GuruprasadRao，当我评论日期格式时，它部分工作。但它会如何影响它呢？它也适用于两个月之间的日期，但不适用于同一个月，即1-30 Apr 15 仍将显示1-May-15 已启用。
我需要检查！给我一点时间！！
当然，如果我将 newDate 格式更改为 d-M-y 而不是 4/16/2015，它会起作用
同样的，我要测试一下！！会尝试让你知道！ :)

标签： jquery date jquery-ui-datepicker

【解决方案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);

        }
});

【讨论】：

大师：可以在我现有的代码中嵌入这个 sn-p 吗？
是的！ @Slimshadddyyy .. :) 你检查过演示吗！！我希望那是你想要达到的目标！！
大师：如果您能告诉我如何将它嵌入到beforeShowDay中，那就太好了
@Slimshadddyyy.. 有什么特别的理由把它放在beforeShowDay 因为minDate for endDate 可以在startDate 的日期更改后决定，并且该事件将是@987654339 @
当end-date datepicker被选中时，会显示禁用日期