jquery 日期时间选择器设置 minDate 动态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5375373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery datetime picker set minDate dynamic
提问by luca
I guys i'm using a datetimepicker by trentrichardson.com.
伙计们，我正在使用 trentrichardson.com 的日期时间选择器。
I have a form with two input fields : fromand toand i want to be able to set dynamically a minDate to my "to" field equal to the value of my "from" field.
我有一个包含两个输入字段的表单：from和to，我希望能够将 minDate 动态设置为我的“to”字段，该字段等于我的“from”字段的值。
I know i should use a beforShow option but don't know how to implement the function.
我知道我应该使用 beforShow 选项，但不知道如何实现该功能。
$('.from,.to').datetimepicker({
beforeShow: customRange
});
EDITED/SOLUTION
编辑/解决方案
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 );
} }
回答by felixsigl
you can set and get minDate dynamically with setter and getter:
您可以使用 setter 和 getter 动态设置和获取 minDate：
//getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
//setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
回答by Tanvir
If you have two textboxes with corresponding IDs fromand toand you want the minDateof toto be the selected date of fromthen do the following:
如果你有两个文本框与相应的ID from，并to和你想minDate的to是所选择的日期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();
回答by andyb
You can restrict the datepicker range.
您可以限制日期选择器范围。
But you want to set this range on creation of the datepicker on the "from". I made you a demowhich seems to work OK as far as I understand the question.
但是您想在“from”上创建日期选择器时设置此范围。我给你做了一个演示，就我理解的问题而言，它似乎可以正常工作。
回答by Matt McDonald
luca: A small addition to your answer...
卢卡：你的答案的一个小补充......
Using the function you suggested the time component is ignored the first time the datetimepicker is displayed. If you close the datetimepicker and reopen it again, the time component mysteriously reappears. I'm not quite sure what is causing this, but it can be fixed with a bit of a hack:
使用您建议的函数，在第一次显示日期时间选择器时会忽略时间组件。如果您关闭 datetimepicker 并再次重新打开它，时间组件会神秘地重新出现。我不太确定是什么导致了这种情况，但是可以通过一些 hack 来修复它：
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);
}
回答by Chris
None of the above answers helped me at all. It either didn't work or gave some kind of error.
以上答案都没有帮助我。它要么不起作用，要么出现了某种错误。
So I merged them all together and made my own one. I used moment.js as mentioned above, just download it and include it in your page.
所以我将它们全部合并在一起并制作了我自己的一个。我使用了上面提到的 moment.js，只需下载它并将其包含在您的页面中。
$("#start_date").datetimepicker({
format: 'Y-m-d 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: 'Y-m-d H:00:00'
});
I am sure there is a better way to do this but I couldn't find it. So I hope this helps someone in the future.
我确信有更好的方法可以做到这一点，但我找不到。所以我希望这对未来的人有所帮助。
回答by Haritsinh Gohil
In jQuery UI datepickerthere is many Functions which are helpful to set minDateor maxDatedynamically like onSelect, onClose.
在 jQuery UI 中，datepicker有许多函数有助于设置minDate或maxDate动态地像onSelect, onClose.
demo of onCloseis already provided in @Tanvir's answer see here: datepicker onClose example
onClose@Tanvir 的回答中已经提供了演示，请参见此处：datepicker onClose 示例
So i will give you example of onSelect.
所以我会给你举个例子onSelect。
before it i will tell you difference between onSelectand onclose, as Name suggests onSelectfire just after user selects a date and onClosefire when datepicker closes after date selection, that's all.
在此之前，我会告诉您onSelect和之间的区别onclose，顾名思义onSelect，在用户选择日期onClose后触发，而在日期选择器在日期选择后关闭时触发，仅此而已。
here we have two datepicker pickupdate1and pickupdate2, and we want to set selected date of pickupdate1to be minDate of pickupdate2and it should be dynamic, so here's the code:
这里我们有两个 datepickerpickupdate1和pickupdate2，我们想将选定的日期pickupdate1pickupdate2设置为 minDate并且它应该是动态的，所以这里是代码：
$("#pickupdate1").datepicker({
dateFormat: "dd-mm-yy",
onSelect: function (selectedDate) {
$('#pickupdate2').datepicker('option', 'minDate', selectedDate);
}
});
$("#pickupdate2").datepicker({
dateFormat: "dd-mm-yy",
});
回答by Raghuram db
This worked for me
这对我有用
<input type="date" name="cname" value="" min="<?php echo date("Y-m-d") ?>"/>
回答by uli78
There is an exampleon trentrichardson.com. They are using "onSelect". For me it's not working perfert. When setting minDate or MaxDate the time component is set to 0 and only the date remains. And I had to solve some localization problems.
trentrichardson.com 上有一个示例。他们正在使用“onSelect”。对我来说，这不是工作 perfert。设置 minDate 或 MaxDate 时，时间组件设置为 0，仅保留日期。我必须解决一些本地化问题。
