使用UI datePicker根据以前填充的日期禁用日期

时间:2014-10-29 13:31:58

标签: jquery date datepicker

我有一个编辑屏幕,其中我的开始日期和结束日期是从数据库中预先填充的。该控件是一个UI datePicker插件。我想根据来自服务器的开始日期来限制/禁用以前的日期。此外,当我更改日期时,我希望结束日期的日期从开始日期后的一天开始。由于该值首先被填充并且控件稍后被添加到输入字段,因此我无法控制它。

任何帮助将不胜感激。 代码如下:

for(var i =0; i<abcd.length; i ++)
{
  $("#startDate input").val(StartDate);
  $("#endDate input").val(EndDate);
 $(".datePicker").datepicker();
}

1 个答案:

答案 0 :(得分:0)

您可以尝试以下代码来设置动态最小和最大日期范围。

 $("input.DateFrom").datepicker({
      beforeShow: customRange 
    });

function customRange(input) {
    //make use of parameter-input if you use this fuction more places
    //write some logic to deside min,max date and return
    var minimumDate = new Date();//or assign value from database and make sure date-format also
    var maximumDate = new Date();
    maximumDate.setDate(minimumDate.getDate()+20);

    return { minDate: minimumDate,
        maxDate: maximumDate
    };
}

如果您想将最小日期和最大值设置为某个不变的范围 ,您可以考虑以下代码:

    $("input.DateFrom").datepicker({
        minDate: 0,
        maxDate: "+1M +10D" 
    });

Reference: jQuery UI date picker min-max

SO Answer-to restrict one date input based on other date input value

jsfiddle demo