JQuery datepicker - 2 input / text fields and bounding range

Question

I am using a jQuery Datepicker widget with two input fields, one for the From date and one for the To date. I use the jQuery Datepicker functional demo as a basis in order to make the two input fields work with each other, but I need to be able to add these additional restrictions:

• The date range can be no earlier than December 01, 2008.

• "To" date cannot be later today

• Once "From" , the value of "To" can be within 7 days after the "From" date

• If the date “To” is selected first, then “From” can only be within 7 days to the date “To” (from the limit of December 01 - the first selectable date)

I can’t get all this to work together.

In general, I would like to be able to choose a range of up to 7 days from December 01 to today (I understand that I am publishing this on December 1, so it will be only today at the moment).

My code is bye

$(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 am missing the 7-day range restriction, as well as preventing the date from choosing To until December 01, 2008 or after today. Any help would be greatly appreciated, thanks.

Answer 1

Thank you very much for your help Ben, I built on your posts and came up with this. Now it is completed and works brilliantly!

Here's a working demo . Add / edit to url to see code

The full code below is

 $(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 }; } 

Answer 2

Ok, 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 to satisfy all your requirements (I think ...)

Answer 3

I realize I'm a little late to the party, but here's how I changed the working code example. I did not need to set the maximum and minimum date, I just did not need to overlap the date range, 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 finalists were already initialized in the script further, but these are only the default settings.)

It seems I need to do what I need to :)

See here for my example.

Answer 4

Consider using rangeSelect to have one control instead of two.

To achieve what you need, I suppose you need to add an onSelect listener and then call datepicker( "option", settings ) to change the settings.

Answer 5

The start date of txtStartDate does not work, because your second minDate is set to null when it checks input.id a second time. In addition, maxDate should check for txtEndDate, not txtStartDate. Try the following:

  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) }; } 

I don’t know why “+ 5” instead of “+ 7”, but if I add 0, I get the selected date range on the day that I selected, plus the following.

Answer 6

Here is the solution I came across after repeatedly searching for a solution to what, in my opinion, is a common problem. This effectively bounces entries around the general input range of compatible days. The value is if I have two fields, then one can be used to limit the other, and the other can override the original, if necessary. The goal is to always ensure that between the two fields there is only a finite range of days (or months or something else). This specific example also limits the time in the future to the fact that something can be selected in any field (for example, 3 months).

 $("#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); } }); 

Answer 7

this is how i use it:

 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) }; } 

Answer 8

Here is how I did it. I took the source from the jQuery website and modified it to add your limitations.

 $(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); } }); }); 

Starting idea from: http://jqueryui.com/demos/datepicker/#date-range

Note: You will also need the reset / clear dates option (i.e. if the user selects "Date", the "Date" becomes limited. From date ", if the user now selects" Date ", the date of the date is also limited. You must have a clear opportunity to allow the user to select a different "From" date.)