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>

我可以选择当前和上个月的任何日期，但如何从所选日期开始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)
            },
    });

`

Answer 1

You can do it as below:

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);

        }
});

EDIT:

$("#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

EDIT 2

The below code works in the format you specified and selecting the beginning dates problem also solved!! The thing is when you set the maxDate to endDate you should follow the same format as you specified the format in 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

EDIT 3 [Hopefully this is final edit ;)]

UPDATED DEMO 3

I was passing 1/Apr/15 format instead of 1-Apr-15 and you can find the changes in the below code!!

 $("#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并禁用后续日期

1 个答案: