2个输入/文本框和限制范围
我使用带有两个输入框的jQuery Datepicker小部件,一个用于“From”日期,另一个用于“To”日期。 我使用jQuery Datepicker功能演示作为获取两个输入框互相协作的基础,但我需要能够添加这些附加限制:
日期范围不得早于2008年12月1日
“到”日期不能晚于今天
一旦一个“开始”日期被选择时,“到”日期只能是“从”日期之后的范围为7天内
如果首先选择“收件人”日期,则“发件人”日期只能在“至”日期前的7天范围内(限制12月01日为第一个可选日期)
我似乎无法让所有上述工作在一起。
总之,我希望能够在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日之前或今天之后阻止了“至”日期选择。 任何帮助将不胜感激,谢谢。
非常感谢您的帮助本,我已经建立在您的帖子上,并拿出了这个。 它现在完成并且出色地工作!
这是一个工作演示 。 添加/编辑到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
};
}
这是我能想到的最好的,满足你所有的要求(我认为...)
我意识到我对派对有点晚了,但这里是我如何修改工作示例代码。 我不需要设置特定的最大和最小日期,只是不希望日期范围重叠,所以我只是让他们设置对方:
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")
};
}
}
(我的日期选择器已经在脚本中被初始化了,但它只是默认设置。)
似乎做我需要它:)
看到我的例子。
链接地址: http://www.djcxy.com/p/68481.html