根据另一个日期选择器或文本框限制jquery datepicker中的日期

Question

我有两个文本框,上面挂着一个日期选择器.文本框用于开始日期和结束日期.设置第一个日期选择器,以便用户无法在今天之前选择日期,但可以选择将来的任何日期.

如何设置第二个日期选择器,使其无法在第一个日期选择器中选择的日期之前选择日期？例如:如果今天是12/11/10,我在第一个日期选择器选择10-12-15,那么第二个日期选择器不应该能够10-12-15之前什么都不选.

以下是我到目前为止的情况:

$("#txtStartDate").datepicker({ minDate: 0 });
$("#txtEndDate").datepicker({});

Answer 1

例如,在此示例代码中,startDatePicker被选为2010-12-12,startDatePicker的更改事件设置endDatePicker 2010-12-13的minDate.它会在此日期之前锁定单元格.这是@Victor提到的样本..我希望它有所帮助......问候...... Ozlem.

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    minDate: new Date(),
    maxDate: '+2y',
    onSelect: function(date){

        var selectedDate = new Date(date);
        var msecsInADay = 86400000;
        var endDate = new Date(selectedDate.getTime() + msecsInADay);

       //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
        $("#endDatePicker").datepicker( "option", "minDate", endDate );
        $("#endDatePicker").datepicker( "option", "maxDate", '+2y' );

    }
});

$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true
});

Answer 2

更新:

上面的方法仅在创建时设置minDate.我使用onSelect事件更改第二个datepicker的minDate选项,如下所示:

$("#txtStartDate").datepicker({
  showOn: "both",       
  onSelect: function(dateText, inst){
     $("#txtEndDate").datepicker("option","minDate",
     $("#txtStartDate").datepicker("getDate"));
  }
});

Answer 3

添加$("#txtEndDate")后,Tin Man的解决方案为我工作.在底部添加了datepicker()

$("#txtStartDate").datepicker({
  showOn: "both",       
  onSelect: function(dateText, inst){
     $("#txtEndDate").datepicker("option","minDate",
     $("#txtStartDate").datepicker("getDate"));
  }
});

$("#txtEndDate").datepicker(); //it is not working with out this line

Answer 4

试试这个人：

$("#dateTo").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    minDate:  new Date()
    }).datepicker("setDate", new Date());
$("#dateFrom").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    onSelect: function(){
        $('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
    }
    }).datepicker("setDate", new Date());

Answer 5

  $('#start_date').datepicker({
       endDate: new Date(),
       autoclose: true,
  }).on("changeDate", function (e) {
       $('#end_date').datepicker('setStartDate', e.date);
  });

  $('#end_date').datepicker({
      autoclose: true,
  });