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

Question

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

如何设置第二个日期选择器，使其无法在第一个日期选择器中选择的日期之前选择日期？例如：如果今天是12/11/10并且我在第一个日期选择器中选择12/15/10，那么第二个日期选择器应该不能在12/15/10之前选择任何东西。

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

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

基于此线程中的先前答案，我觉得一个适用于默认值并重新应用最小和最大日期的解决方案将非常有用：

// Defaults
var defaultFromDate = new Date();
var defaultToDate = new Date();
defaultToDate.setMonth(defaultToDate.getMonth() + 1);

// To
$("#datepickerTo").datepicker({
  dateFormat: "yy-mm-dd",
  changeMonth: true,
  changeYear: true,
});
$("#datepickerTo").datepicker("setDate", defaultToDate);

function limitToDateSpan(currentFromDate) {
  $("#datepickerTo").datepicker("option", "minDate", currentFromDate);

  var maxDate = new Date(currentFromDate.getTime());
  maxDate.setFullYear(maxDate.getFullYear() + 1);

  $("#datepickerTo").datepicker("option", "maxDate", maxDate);
}

limitToDateSpan(defaultFromDate);

// From
$("#datepickerFrom").datepicker({
  dateFormat: "yy-mm-dd",
  changeMonth: true,
  changeYear: true,
  minDate: "2013-01-01",
  maxDate: "+1Y",
  onSelect: function (dateText) {
    limitToDateSpan(new Date(dateText));
  }
});
$("#datepickerFrom").datepicker("setDate", defaultFromDate);

Answer 3

更新：

上述方法仅在创建时设置minDate。我使用onSelect事件更改第二个datepicker的minDate选项，如下所示：

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

Answer 4

添加$（“＃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 5

从纯粹的UI角度来看，你不应该这样做。如果用户在两个日期选择器上选择了错误的月份，并尝试选择正确的月份，则他受到UI阻碍的50％变化。理想情况下，您将允许不正确的选择并显示一条有用的错误消息，指出结束日期应该在结束日期之后。

如果您希望实现您的想法：为每个日期选择器提供一个"change"事件，该事件可以适当地更改另一个日期选择器上的选项。

Answer 6

试试这个男人：

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

使用第一个datepicker UI的“getDate”方法，并将其传递给第二个datepicker的minDate选项：

$("#txtEndDate").datepicker({
    showOn: "both",
    minDate: $("#txtStartDate").datepicker("getDate")
});

Answer 8

使用此代码：

<script type="text/javascript">
    $(function () {
        $("#txtStartDate").datepicker({
            dateFormat: 'dd/mm/yy',
            inline: true,
            minDate: 'dateToday'
        });
        $("#txtEndDate").datepicker({
            dateFormat: 'dd/mm/yy',
            inline: true,
             minDate: $("#txtStartDate").datepicker("getDate") });
        });
</script>

Answer 9

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

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

Answer 10

 $startDateCtrl.change(function () {
            setMinEndDateValue($startDateCtrl, $endDateCtrl);
        });

 $endDateCtrl.datepicker(); 

我有两个日期选择器开始和结束。结束日期我们根据开始选择设置的最小和最大日期。结束日期选择器的最小开始日期是从开始选择器选择的开始日期。结束日期选择器的最大结束日期是从开始日期选择器+ 7天开始选择的开始日期。

function setMinEndDateValue($startDateCtrl, $endDateCtrl) {
            var $maxSchedulingDate = new Date(@MaxDate.Year, @MaxDate.Month -1, @MaxDate.Day );
            var $startDate = $startDateCtrl.val();
            var $selectedStartDate = new Date($startDate);
            $selectedStartDate.setDate($selectedStartDate.getDate() + 7); // increasing the start date by 7 days (End Date max)
            var $maxEndDate = new Date();
            if ($selectedStartDate > $maxSchedulingDate) {
                $maxEndDate = $maxSchedulingDate;
            }
            else {
                $maxEndDate = $selectedStartDate;
            }
            $endDateCtrl.datepicker("option", "minDate", $startDate);
            $endDateCtrl.datepicker("option", "maxDate", $maxEndDate);
        }