Geek Answers Handbook

Create a specific date range using jQuery datepicker

I am trying to use jQuery date picker to create a start date calendar and an end date calendar. I use an example of a "date range": http://jqueryui.com/demos/datepicker/#date-range

The start date cannot be before today's date, and the end date can be 30 days after the selected start date.

For example, if I chose the start date of May 17 in the first datepicker, then the end date in the second datepicker can only be selected from May 18 to June 18.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Untitled Document</title> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script type="text/javascript"> $(function() { var dates = $( "#from, #to" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 2, onSelect: function( selectedDate ) { var option = this.id == "from" ? "minDate" : "maxDate", instance = $( this ).data( "datepicker" ), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings ); dates.not( this ).datepicker( "option", option, date ); } }); }); </script> </head> <body> <div class="date"> <label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/> </div><!-- End demo --> </html>

Any help would be greatly appreciated. Thanks!

+4
source share
2 answers

Here you are: http://jsfiddle.net/c0mm0n/SJhmF/3/

 $(function() { $( "#from, #to" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onSelect: function( selectedDate ) { if(this.id == 'from'){ var dateMin = $('#from').datepicker("getDate"); var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 1); // Min Date = Selected + 1d var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 31); // Max Date = Selected + 31d $('#to').datepicker("option","minDate",rMin); $('#to').datepicker("option","maxDate",rMax); } } }); });
+11
source

This should do it:

http://jsfiddle.net/abze4/

 $(function() { var fromDate = $("#from").datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 2, minDate: new Date(), onSelect: function(selectedDate) { var instance = $(this).data("datepicker"); var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); date.setDate(date.getDate()+30); toDate.datepicker("option", "minDate", date); } }); var toDate = $("#to").datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 2 }); });

It basically sets with date minDate from today. Then, when you select fromDate, it sets minDate toDate to the selected date +30.

+2
source

More articles:


All Articles