jQuery Datepicker - Multiple instances and disable previously selected dates?

Question

I have a page where the user can select three different appointment days using the jQuery UI Datepicker. When the user selects a day in the first field, I would like that date blocked out from the other two fields. I currently am also disabling Sundays, but cannot get dynamic date disabling working.

    Appointment Time 1<br />
<input id="appointment1_date" type="text" name="appointment1_date" value="Select..." />

Appointment Time 2<br />
<input id="appointment2_date" type="text" name="appointment2_date" value="Select..." />

Appointment Time 3<br />
<input id="appointment3_date" type="text" name="appointment3_date" value="Select..." />


     <script type="text/javascript">
     function noSunday(date){
          var day = date.getDay();
                      return [(day > 0), ''];
          };
     </script>
     <script type="text/javascript">
     $(function() {
      $("#appointment1_date").datepicker(
      {
       minDate: +2, 
       beforeShowDay: noSunday
      });
     });
     $(function() {
      $("#appointment2_date").datepicker(
      {
       minDate: +2, 
       beforeShowDay: noSunday
      });
     });
     $(function() {
      $("#appointment3_date").datepicker(
      {
       minDate: +2, 
       beforeShowDay: noSunday
      });
     });
     </script>

Answer 1

You can use the beforeShowDay function to set disabled dates.

See here for a full explanation.

Answer 2

To block out dates from the other fields, you have to obtain the date and do the comparison in your handling function. Given the code you provided, the following should work as a replacement for noSunday:

function noSunday(date) {
      var day = date.getDay();
      return [
          (day > 0 &&
           date.valueOf() != $('#appointment1_date').datepicker('getDate').valueOf()
          ),
          ''
      ];
};

Basically, not only do you want to make sure that day > 0 so that it isn't a Sunday, but also make sure that the date is not equal to the date given by appointment1_date. Using .datepicker('getDate') and comparing its valueOf() with date is the key.

You might want to rename it something like noSundayOrSelected or something equally descriptive.