jquery datepicker根据第一个date字段中的选定date限制第二个date字段中的date

我正在使用Jquerydateselect器，我有以下代码，当用户select一个date，下面的字段填充date+1

$('#dt2').datepicker({ dateFormat: "dd-M-yy" }); $("#dt1").datepicker( {dateFormat: "dd-M-yy", minDate: 0, onSelect: function(date){ var date2 = $('#dt1').datepicker('getDate'); date2.setDate(date2.getDate()+1); $('#dt2').datepicker('setDate', date2); 

我想限制dt2字段中的date，不应低于dt1字段中的date。 例如，如果在dt1select的date是01-May-2013 ，则允许用户在01-May-2013之后selectdate，不能less于02-May-2013

我怎样才能限制在date字段2中的dateselect？

Answer 1

我为你创造了一个jsfiddle。 我不是100％确定它是否“万无一失”，但为了防止用户手动inputdate，您可以将input设置为readonly

 <input type="text" id="dt1" readonly="readonly"> 

此刻我检查dt2 onClose，如果它的date低于dt1sdate我纠正它。 另外，如果在dt1中select了一个date，dt2的minDate被设置为dt1date+1。

 $(document).ready(function () { $("#dt1").datepicker({ dateFormat: "dd-M-yy", minDate: 0, onSelect: function (date) { var date2 = $('#dt1').datepicker('getDate'); date2.setDate(date2.getDate() + 1); $('#dt2').datepicker('setDate', date2); //sets minDate to dt1 date + 1 $('#dt2').datepicker('option', 'minDate', date2); } }); $('#dt2').datepicker({ dateFormat: "dd-M-yy", onClose: function () { var dt1 = $('#dt1').datepicker('getDate'); var dt2 = $('#dt2').datepicker('getDate'); //check to prevent a user from entering a date below date of dt1 if (dt2 <= dt1) { var minDate = $('#dt2').datepicker('option', 'minDate'); $('#dt2').datepicker('setDate', minDate); } } }); }); 

看到jsfiddle

Answer 2

以下是我如何做到这一点 –

DEMO

代码如下

 $('#dt2').datepicker({ dateFormat: "dd-M-yy" }); $("#dt1").datepicker({ dateFormat: "dd-M-yy", minDate: 0, onSelect: function(date){ var date1 = $('#dt1').datepicker('getDate'); var date = new Date( Date.parse( date1 ) ); date.setDate( date.getDate() + 1 ); var newDate = date.toDateString(); newDate = new Date( Date.parse( newDate ) ); $('#dt2').datepicker("option","minDate",newDate); } }); 

Answer 3

我只是改变了你的代码，所以date2的最小date自动设置，如果date1大于date2，它设置date2 = date1

  $("#dt1").datepicker({ dateFormat: "dd/mm/yy", onSelect: function (date) { var dt1 = $('#dt1').datepicker('getDate'); var dt2 = $('#dt2').datepicker('getDate'); if (dt1 > dt2) { $('#dt2').datepicker('setDate', dt1); } $('#dt2').datepicker('option', 'minDate', dt1); } }); $('#dt2').datepicker({ dateFormat: "dd/mm/yy", minDate: $('#dt1').datepicker('getDate'), onClose: function () { var dt1 = $('#dt1').datepicker('getDate'); var dt2 = $('#dt2').datepicker('getDate'); //check to prevent a user from entering a date below date of dt1 if (dt2 <= dt1) { var minDate = $('#dt2').datepicker('option', 'minDate'); $('#dt2').datepicker('setDate', minDate); } } });