jQuery数据拾取器-2输入/文本框和限制范围
jQuery数据拾取器-2输入/文本框和限制范围
提问于 2008-12-01 12:49:38
我正在使用带有两个输入框的jQuery日期选择器小部件，一个输入框用于"From" date，第二个输入框用于"To" date。我使用jQuery Datepicker functional demo作为让两个输入框相互配合工作的基础，但我需要能够添加这些额外的限制：
- "To" date range range不能早于2008年12月1日如果首先选择了E121到E222的日期，则一旦选择了“From a "From" date，"To" date只能在后7天内”，则"From" date只能在"To" date之前7天的范围内(限制为12月1日为第一个可选日期)
我似乎不能把上面所有的东西放在一起工作。
总而言之，我希望能够选择从12月1日到今天的最多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日之前或今天之后选择"To"日期。任何帮助都将不胜感激，谢谢。
回答 7
Stack Overflow用户
回答已采纳
发布于 2008-12-02 10:35:37
非常感谢你的帮助，本，我建立在你的帖子上，并提出了这一点。它现在已经完成了，并且运行得非常出色！
这是一个。将/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
};
}Stack Overflow用户
发布于 2010-06-10 23:26:56
我意识到我来得有点晚了，但以下是我如何修改工作示例代码的。我不需要设置特定的最大和最小日期，只是不想日期范围重叠，所以我就让它们彼此设置：
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")
};
}
}(我的日期选择器已经在更高的脚本中进行了初始化，但这只是默认设置。)
似乎做了我需要它做的事情:)
有关我的示例，请参阅here。
Stack Overflow用户
发布于 2008-12-01 21:18:21
好吧，这样如何：
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
};
}这是我能想到的满足您所有要求的最佳方案(我认为……)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/330737
复制相关文章
相似问题
腾讯云开发者
