jQuery datepicker – 2input/文本框和限制范围
我正在使用两个input框的jQuerydateselect器小部件，一个用于“从”date，第二个用“到”date。 我正在使用jQuery Datepickerfunction演示作为获取两个input框相互工作的基础，但我需要能够添加这些额外的限制：
-
date范围不得早于2008年12月1日
-
“到”date不能晚于今天
-
一旦select“发件人”date， “发件人”date只能在“发件人”date后的7天内
-
如果首先select“收件人”date，那么“发件人”date只能在“至”date前的7天范围内（以12月01日的限制为第一个可选date）
我似乎无法让所有上述工作在一起。
总之，我希望能够在12月1日到今天之间select一个长达7天的范围（我意识到我在12月1日发布这个消息，因此只能在今天获得）。
我的代码到目前为止
$(function () { $('#txtStartDate, #txtEndDate').datepicker( { showOn: "both", beforeShow: customRange, dateFormat: "dd M yy", firstDay: 1, changeFirstDay: false }); }); function customRange(input) { return { minDate: (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : null), minDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null), maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null) }; } 我错过了7天范围的限制，也阻止了2008年12月1日之前或今天之后的“到”dateselect。 任何帮助将不胜感激，谢谢。
非常感谢您的帮助本，我已经build立在您的职位，并拿出了这一点。 现在是完整的，出色的工作！
这是一个工作演示 。 添加/编辑到URL来查看代码
完整代码如下 –
$(function () { $('#txtStartDate, #txtEndDate').datepicker({ showOn: "both", beforeShow: customRange, dateFormat: "dd M yy", firstDay: 1, changeFirstDay: false }); }); function customRange(input) { var min = new Date(2008, 11 - 1, 1), //Set this to your absolute minimum date dateMin = min, dateMax = null, dayRange = 6; // Set this to the range of days you want to restrict to if (input.id === "txtStartDate") { if ($("#txtEndDate").datepicker("getDate") != null) { dateMax = $("#txtEndDate").datepicker("getDate"); dateMin = $("#txtEndDate").datepicker("getDate"); dateMin.setDate(dateMin.getDate() - dayRange); if (dateMin < min) { dateMin = min; } } else { dateMax = new Date; //Set this to your absolute maximum date } } else if (input.id === "txtEndDate") { dateMax = new Date; //Set this to your absolute maximum date if ($("#txtStartDate").datepicker("getDate") != null) { dateMin = $("#txtStartDate").datepicker("getDate"); var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + dayRange); if(rangeMax < dateMax) { dateMax = rangeMax; } } } return { minDate: dateMin, maxDate: dateMax }; }
好的，这个怎么样：
function customRange(input) { var min = new Date(2008, 12 - 1, 1); var dateMin = min; var dateMax = null; if (input.id == "txtStartDate" && $("#txtEndDate").datepicker("getDate") != null) { dateMax = $("#txtEndDate").datepicker("getDate"); dateMin = $("#txtEndDate").datepicker("getDate"); dateMin.setDate(dateMin.getDate() - 7); if (dateMin < min) { dateMin = min; } } else if (input.id == "txtEndDate") { dateMax = new Date(); if ($("#txtStartDate").datepicker("getDate") != null) { dateMin = $("#txtStartDate").datepicker("getDate"); dateMax = $("#txtStartDate").datepicker("getDate"); dateMax.setDate(dateMax.getDate() + 7); } } return { minDate: dateMin, maxDate: dateMax }; }
这是最好的，我可以拿出满足你所有的要求（我认为…）
我意识到我晚了一点晚，但这里是我如何修改工作示例代码。 我不需要设置具体的最大和最小date，只是不希望date范围重叠，所以我只是让他们设置对方：
jQuery(function() { jQuery('#calendardatetime_required_to, #calendardatetime_required_from').datepicker('option', { beforeShow: customRange }); }); function customRange(input) { if (input.id == 'calendardatetime_required_to') { return { minDate: jQuery('#calendardatetime_required_from').datepicker("getDate") }; } else if (input.id == 'calendardatetime_required_from') { return { maxDate: jQuery('#calendardatetime_required_to').datepicker("getDate") }; } }
（我的dateselect器已经在脚本中被初始化了，但这只是默认设置。）
似乎做我所需要的:)
看我的例子。
考虑使用rangeSelect有一个控制而不是两个。
为了实现你的目标，我想你需要添加一个onSelect监听器，然后调用datepicker( "option", settings )来改变设置。
txtStartDate的开始date不起作用，因为当第二次检查input.id时，第二个minDate被设置为null。 另外，maxDate应该检查txtEndDate，而不是txtStartDate。 尝试这个：
function customRange(input) { var mDate = (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : $("#txtStartDate").datepicker("getDate")); return { minDate: mDate, maxDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate").getDate() + 5 : null) }; }
我不知道为什么'+ 5'而不是'+ 7'，但是如果我加0，我会select一天的date范围。
这是一个解决scheme，我想了很多挖掘解决scheme，我认为是一个共同的问题。 这可以在兼容的日子的共享input范围内有效“反弹”input。 意思是 – 如果我有两个领域，任何一个都可以用来约束另一个领域，另一个可以重新定义原来的领域。 这样做的目的是始终确保两个字段之间只有有限的几天（或几个月或者其他）。 这个具体的例子也限制了将来可以select任何一个领域（例如3个月）的时间。
$("#startdate").datepicker({ minDate: '+5', maxDate: '+3M', changeMonth: true, showAnim: 'blind', onSelect: function(dateText, inst){ // Capture the Date from User Selection var oldDate = new Date(dateText); var newDate = new Date(dateText); // Compute the Future Limiting Date newDate.setDate(newDate.getDate()+5); // Set the Widget Properties $("#enddate").datepicker('option', 'minDate', oldDate); $("#enddate").datepicker('option', 'maxDate', newDate); } }); $("#enddate").datepicker({ minDate: '+5', maxDate: '+3M', changeMonth: true, showAnim: 'blind', onSelect: function(dateText, inst){ // Capture the Date from User Selection var endDate = new Date(dateText); var startDate = new Date(dateText); // Compute the Future Limiting Date startDate.setDate(startDate.getDate()-5); // Set the Widget Properties $("#startdate").datepicker('option', 'minDate', startDate); $("#startdate").datepicker('option', 'maxDate', endDate); } });$("#startdate").datepicker({ minDate: '+5', maxDate: '+3M', changeMonth: true, showAnim: 'blind', onSelect: function(dateText, inst){ // Capture the Date from User Selection var oldDate = new Date(dateText); var newDate = new Date(dateText); // Compute the Future Limiting Date newDate.setDate(newDate.getDate()+5); // Set the Widget Properties $("#enddate").datepicker('option', 'minDate', oldDate); $("#enddate").datepicker('option', 'maxDate', newDate); } }); $("#enddate").datepicker({ minDate: '+5', maxDate: '+3M', changeMonth: true, showAnim: 'blind', onSelect: function(dateText, inst){ // Capture the Date from User Selection var endDate = new Date(dateText); var startDate = new Date(dateText); // Compute the Future Limiting Date startDate.setDate(startDate.getDate()-5); // Set the Widget Properties $("#startdate").datepicker('option', 'minDate', startDate); $("#startdate").datepicker('option', 'maxDate', endDate); } });
这是我如何使用它：
function customRange(input) { var min = new Date(); return { minDate: ((input.id == "txtStartDate") ? min : (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null)), maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null) }; }
这是我做到的。 我已经从Jquery的用户界面网站的来源，并修改它添加你的约束。
$(document).ready(function () { var dates = $('#StartDate, #EndDate').datepicker({ minDate: new Date(2008, 11, 1), maxDate: "+0D", dateFormat: "dd M yy", changeMonth: true, changeYear: true, onSelect: function (selectedDate) { var option = this.id == "StartDate" ? "minDate" : "maxDate", instance = $(this).data("datepicker"), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); var edate; var otherOption; var d; if (option == "minDate") { otherOption = "maxDate"; d = date.getDate() + 7; } else if (option == "maxDate") { otherOption = "minDate"; d = date.getDate() - 7; } var m = date.getMonth(); var y = date.getFullYear(); edate = new Date(y, m, d); dates.not(this).datepicker("option", option, date); dates.not(this).datepicker("option", otherOption, edate); } }); });
最初的想法来自： http : //jqueryui.com/demos/datepicker/#date-range
注意：您还需要一个选项来重置/清除date（例如，如果用户select“开始date”，“到期date”变得有限。select“开始date”后，如果用户现在select“到目前为止” '，发件date也受到限制，您需要有一个明确的选项来允许用户select不同的“发件人”date。）
