2 inputs/textboxes and restricting range
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:
Date range can be no earlier than 01 December 2008
"To" date can be no later than today
Once a "From" date is selected, the "To" date can only be within a range of 7 days after the "From" date
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.
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).
My code so far
$(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)
};
}
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.
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!
Here's a Working Demo . Add /edit to the URL to see the code
Complete Code below-
$(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
};
}
Alright, how about this:
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
};
}
This is the best I could come up with that met all of your requirements (I think...)
I realise I'm a little late to the party, but here is how I modified the working example code. I didn't need to set a specific maximum and minimum date, just didn't want a date range overlap, so I just let them set each other:
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")
};
}
}
(My datepickers were already initialised in a script further up, but it's just default settings.)
Seems to do what I need it to :)
See here for my example.
链接地址: http://www.djcxy.com/p/68482.html上一篇: Java OCR实现
下一篇: 2个输入/文本框和限制范围