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

更新

上述方法仅在创建时设置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

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

如果您希望实现您的想法：为每个日期选择器添加"change"事件，以便相应地更改其他日期选择器上的选项。

Answer 5

试试这个男人：

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

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

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

Answer 7

使用此代码：

<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 8

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

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

Answer 9

大家好，在这种情况下，大家将展示什么对我有用：

2 个日期选择器（DateFrom 和 DateTo）
HTML：

<!-- Datapicker dateFrom -->    
<label for="dateFrom"> Date from: </label>
  <div>
    <input type="text" id="dateFrom" class="form-control" autocomplete="off"
               th:placeholder="Enter a date From.."/>
    </div>
                                    
<!-- Datapicker dateTo-->   
<label for="dateTo"> Date to: </label>
  <div>
      <input type="text" id="dateTo" class="form-control" autocomplete="off"
               th:placeholder="Enter a date to..."/>
    </div>

接下来，您将使用 JavaScript 构建数据选择器：
数据选择器激活（根据您的数据选择器构建要求）

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

$('#dateTo').datepicker({                
    dateFormat: 'yy-mm-dd',
    showButtonPanel: true
});

-最后在 OnChange 事件上，每次在任何日期选择器中选择日期时，其他数据选择器中的可选范围都会发生变化。

$("body").on("change", "#dateFrom", function() {    
    $('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
});

$("body").on("change", "#dateTo", function() {
    $('#dateFrom').datepicker('option', 'maxDate', $("#dateTo").datepicker("getDate"));
});

这使得 DateTo DataPicker 限制更改 DateFrom Datapicker 的日期，反之亦然。

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

Answer 11

在此线程的先前答案的基础上，我觉得一个可以使用默认值并重新应用最小和最大日期的解决方案将很有用：

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

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

11 个答案: