保持由第一个日期选择器限制的第二个日期选择器

我试图使用下面的代码片段来控制日期选择器字段的最小日期基于在它之前的前一个字段中选择的日期。经典的“开始日期”“结束日期”情况。如果用户将开始日期更改为结束日期之后，我也想将结束日期更改为开始日期。保持由第一个日期选择器限制的第二个日期选择器

这是我正在尝试。

$('#projBegins .hasDatepicker').datepicker({ 
    onSelect: function(dateStr) {   
     $('#projEnds .hasDatepicker').val(dateStr); 
     $('#projEnds .hasDatepicker').datepicker('option',{ minDate: new Date(dateStr)}) 
    } 
});

来源

2016-08-14 Eckstein

我想通了，我是用语法来取得了新的日期选择器，而不是编辑现有的一个...... – Eckstein

在类名 “hasDatepicker” 问题。

请勿在您的datepicker的输入元素中使用hasDatepicker类名称。使用不同的名称，如date_picker。

JQuery将类hasDatepicker添加到调用datepicker（）的元素。如果元素已经有类hasDatepicker，那么datepicker（）函数就什么也不做。所以使用不同的类名。

尝试以下工作例如：

$(function() { 
 

 
    $("#projBegins .datepicker").datepicker({ 
 
    onClose: function(selectedDate) { 
 
     var start = $("#projBegins .datepicker").datepicker("getDate"); 
 
     var end = $("#projEnds .datepicker").datepicker("getDate"); 
 
     alert(start); 
 
     alert(end); 
 
     if (start > end) { 
 
     $('#projEnds .datepicker').val(selectedDate); 
 
     } 
 
     $(".end-date").datepicker("option", "minDate", selectedDate); 
 
    } 
 
    }); 
 
    $("#projEnds .datepicker").datepicker({ 
 
    minDate: 0, 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 

 
<div id="projBegins"> 
 
    <input type="text" class="datepicker"> 
 
</div> 
 
<div id="projEnds"> 
 
    <input type="text" class="datepicker"> 
 
</div>

来源

2016-08-14 03:48:38

在我的情况下，我相信它会这样： $（'＃projBegins .hasDatepicker'）。dat epicker（{ DATEFORMAT： “M/d/y” 的， \t \t的minDate：0，的OnClose：函数（selectedDate）{ $（ '＃projEnds .hasDatepicker'）日期选择器（ “选项”， “的minDate”， selectedDate）; } }）; 。 $（ '＃projEnds .hasDatepicker'）日期选择器（{ 的minDate：0， DATEFORMAT： “M/d/y” 的，的OnClose：函数（selectedDate）{ $（ '＃projBegins .hasDatepicker'）日期选择器（“选项”，“maxDate”，selectedDate）; } }）; – Eckstein

不幸的是，这不工作。 – Eckstein

这里是如何做到这一点：

startInput.datepicker('option', 'onSelect', function(date){ 
      expInput.datepicker('option', 'minDate', date); 
     });

来源

2016-08-14 05:45:00 Eckstein

保持由第一个日期选择器限制的第二个日期选择器

回答

相关问题