jQuery datepicker- 2 个输入/文本框和限制范围 [英] jQuery datepicker- 2 inputs/textboxes and restricting range
问题描述
我使用带有两个输入框的 jQuery Datepicker 小部件,一个用于 "From" 日期,第二个用于 "To" 日期.我使用 jQuery Datepicker 功能演示 作为让两个输入框相互配合的基础,但是我需要能够添加这些额外的限制:
I am using the jQuery Datepicker widget with two input boxes, one for the "From" date and the second with the "To" date. I am using the jQuery Datepicker functional demo as a basis for getting the two input boxes to work with each other, but I need to be able to add these additional restrictions:
日期范围不能早于2008 年 12 月 1 日
Date range can be no earlier than 01 December 2008
To" 日期不能为迟于今天
一次自"日期被选中,到"日期只能在 7 天后的范围内自"日期
Once a "From" date is selected, the "To" date can only be within a range of 7 days after the "From" date
如果 截止" 日期是首先选择,然后是起始"日期只能在 7 的范围内截止" 日期之前的天数(带有12 月 1 日的限制是第一个可选日期)
If a "To" date is selected first, then the "From" date can only be within the range of 7 days before the "To" date (with the limit of 01 December being the first selectable date)
我似乎无法让上述所有工作一起工作.
I can't seem to get all of the above working together.
总而言之,我希望能够选择从 12 月 1 日到今天之间最多 7 天的范围(我意识到我是在 12 月 1 日发布的,所以暂时只能到今天).
In summary, I would like to be able to select a range of up to 7 days between 01 December and today (I realise I am posting this on 1st December so will only get today for the moment).
到目前为止我的代码
$(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 日之前或今天之后.任何帮助将不胜感激,谢谢.
I'm missing the 7 day range restriction and also preventing a "To" date selection before 01 December 2008 or after today. Any help would be much appreciated, Thanks.
推荐答案
非常感谢 Ben 的帮助,我在你的帖子的基础上提出了这个问题.它现在已经完成并且运行良好!
Many thanks for your help Ben, I have built upon your posts and have come up with this. It is now complete and works brilliantly!
这是一个工作演示.在 URL 中添加 /edit 以查看代码
下面的完整代码-
$(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
};
}
这篇关于jQuery datepicker- 2 个输入/文本框和限制范围的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!