CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepicker
steve_o
steve_o

Reputation: 1243

jquery UI - datepicker - setting a second one based on selection from first

Using jQuery 1.9.1 & jQuery-ui 1.10.3. I have a page that will have 2 datepickers on it. They will be used as a filter in selecting from a SQL table. I'm reading a table row that has in it the min and max dates on the table.

datepicker1 is the start date, datepicker2 is the end date. Using the min and max above, the calendar should begin in datepicker1 with that date as the default, and datepicker2 should have max as the most recent selectable date. Those 2 dates serve as a hard beginning & end to the selectable dates on my calendar. No date though has been set in the input box for either date.

What I need to do is that once the user makes a selection (in either of the datepicker controls), to enforce rules on the other datepicker based on that selection, but only if the other datepicker hasn't already been selected.

Once a date has been selected from one, the other (unselected) datepicker would have a pre-determined window of 14 days from the selected one (>= if datepicker1 was selected first, <= if datepicker2 was selected first) as its max (or min) date. For example:

Page loads, and minDate of 2012-12-10 & maxDate of 2013-10-22 is returned from query. datepicker1 has the 12/10 date as it's "beginning" (farthest day back that can be selected). datepicker2 has 10/22/2013 date as its "end" (newest day that can be selected).

User clicks on calendar control in datepicker1 and selects 2013-02-14.

Now, datepicker2 would re-calculate its new maxDate, to be 14 days after 2013-02-14.

User then can select any date >= 2013-02-14 through 2013-02-28 as an end date.

Process would be reversed if datepicker2 was selected first.

The options on each datepicker are pretty much the same for both:

    $(function(){
      $("#datepicker1").datepicker({
        dateFormat: "yy-mm-dd",
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        changeMonth: true,
        changeYear: true,
        buttonImage: "calendar-blue.png",
        buttonImageOnly: true,
        buttonText: "Choose Start Date",
        showOn: "both",
        numberOfMonths: 1,
        beforeShow: function(input, inst) {
                $(".ui-datepicker").addClass("resizeDP");
                },
        onClose: function(selectedDate) {
                $(".ui-datepicker").removeClass("resizeDP");
                }
  });
});

I can enforce the max and min dates on the calendars when the page is loaded, but can't make the "new" 14 day one apply when it is selected. I've tried several different ways (mostly in the onClose) but can't make any of them work.

Upvotes: 0

Views: 1183

Answers (1)

Trevor
Trevor

Reputation: 16116

Have you tried something like this?

 $("#datepicker2").click(function(){
     if($("#datepicker1").val() != ""){
       $(this).datepicker("destroy");
       $(this).datepicker({
         //initialize datepicker2 based on datepicker1 value 
       });
       $(this).datepicker("show");
    }   
 });

And vice versa.

Note i'm not sure if the date picker opens up before the on click event. But you could always do it on the mouse down or even blur event of Datepicker1 to set Datepicker2 etc..

Upvotes: 0

Related Questions