jquery datetime picker设置minDate动态
我们正在使用trentrichardson.com的datetimepicker。
我有一个带有两个输入字段的表单： from和to ，我希望能够动态地将minDate设置为我的“to”字段，该字段等于我的“from”字段的值。
我知道我应该使用beforShow选项，但不知道如何实现该function。
$('.from,.to').datetimepicker({ beforeShow: customRange }); 编辑/解决方案
function customRange(input) { if (input.id == 'to') { var x=$('#from').datepicker("getDate"); $( ".to" ).datepicker( "option", "minDate",x ); } else if (input.id == 'from') { var x=$('#to').datepicker("getDate"); $( ".from" ).datepicker( "option", "maxDate",x ); } }
你可以使用setter和getter动态设置和获取minDate：
//getter var minDate = $( ".selector" ).datepicker( "option", "minDate" ); //setter $( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
在这里解释
如果您有两个带有相应ID的文本框，并且您希望minDate为from的所选日期，请执行以下操作：
$("#from").datepicker({ minDate: 0, // to disable past dates (skip if not needed) onClose: function(selectedDate) { // Set the minDate of 'to' as the selectedDate of 'from' $("#to").datepicker("option", "minDate", selectedDate); } }); $("#to").datepicker();
您可以限制datepicker范围 。
但是你想在“from”上创建datepicker时设置这个范围。 我做了一个演示 ，据我理解这个问题似乎工作正常。
卢卡：你答案的一小部分……
使用您建议的function，第一次显示datetimepicker时，将忽略时间组件。 如果关闭datetimepicker并再次重新打开它，时间组件会神秘地重新出现。 我不太确定是什么导致这种情况，但它可以通过一些黑客修复：
function setMinMaxDate ( element ) { // Store current date - setting max/min date seems to destroy time component var val = $(element).val(); if (element.id == 'endDate') { var x=$('#startDate').datetimepicker("getDate"); $( element ).datetimepicker( "option", "minDate",x ); } else if (element.id == 'startDate') { var x=$('#endDate').datetimepicker("getDate"); $( element ).datetimepicker( "option", "maxDate",x ); } // Restore date $(element).val(val); }
trentrichardson.com上有一个例子 。 他们正在使用“onSelect”。 对我而言，这不是完美的。 设置minDate或MaxDate时，时间组件设置为0并且仅保留日期。 我不得不解决一些本地化问题。
上述答案都没有帮助我。 它要么不起作用，要么给出某种错误。
所以我将它们合并在一起并制作了自己的一个。 我使用了上面提到的moment.js，只需下载它并将其包含在您的页面中。
$("#start_date").datetimepicker({ format: 'Ymd H:00:00', onChangeDateTime: function(dp, $input){ var dt2 = $('#end_date'); var minDate = $('#start_date').val(); var currentDate = new Date(); var targetDate = moment(minDate).toDate(); var dateDifference = currentDate - targetDate; var minLimitDate = moment(dateDifference).format('YYYY/MM/DD'); var endDate = moment(dt2.val()).toDate(); if((currentDate - endDate) >= (currentDate - targetDate)) dt2.datetimepicker({ 'value': minDate }); dt2.datetimepicker({ 'minDate': '-'+minLimitDate }); } }); $("#end_date").datetimepicker({ format: 'Ymd H:00:00' });
我相信有更好的方法可以做到这一点，但我找不到它。 所以我希望这有助于将来的某些人。
这对我有用
"/>