具有自定义动态日期范围的jQuery UI datepicker

Question

I'm using jQuery UI datepicker plugin in one of my application developed with CodeIgniter . And it's working fine they way I expected it to work.

Now I'm working on a new form where I need a custom date range for the datepicker field which user can choose a date from. So far when user comes to the form it's showing a year dropdown field. And once user choose a year from the dropdown my functionality is appending some new fields to the form. So one field is Date Applied , which is a text field and there I'm initializing the jQuery UI datepicker and it's showing the datepicker when user focus on that field.

So this is what I have done so far. Now let me explain about the problem. As per user year selection from very first step I want to restrict Date Applied selection. If user selected 2014 then I want to allow user to choose 1 Oct, 2014 to 30 Sep, 2015 . So month range will always 1 Oct - 30 Sep and year will be selected year - selected year + 1 .

Some more examples:

• 2010 - 1 Oct, 2010 to 30 Sept, 2011
• 2015 - 1 Oct, 2015 to 30 Sept, 2016
• 2016 - 1 Oct, 2016 to 30 Sept, 2017

Please let me know if anyone can help me how to set these custom dynamic date range in the jQuery UI datepicker.

Answer 1

As in this example on datepicker close event set new minDate and maxDate values.

$("#to").datepicker({
  onClose: function(selectedDate) {
    $("#from").datepicker("option", "maxDate", selectedDate);
  }
});

Answer 2

You can set the year range using this option per documentation here http://api.jqueryui.com/datepicker/#option-yearRange

$( ".selector" ).datepicker({
 yearRange: "2002:2012"
 });

or

$( ".selector" ).datepicker({
 yearRange: "-50:+0"//last 50 year
});

Answer 3

I'm able to make it working. Below is the codes that solve my problem.

var firstYear    = userYear;
var endYear      = userYear + 1;
$( ".addDatePickerTransfer" ).datepicker({
   yearRange: "'" + firstYear + ":" + endYear + "'",
   minDate: new Date(firstYear, 10 - 1, 1),
   maxDate: new Date(endYear, 9 - 1, 30)
});

NOTE: userYear is the value, I received from user selected year value.