CODEWITHSUNDEEP
javascriptjquery
user137102
user137102

Reputation:

jQuery Datepicker - Multiple instances and disable previously selected dates?

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>

Upvotes: 1

Views: 1601

Answers (2)

Adam Bellaire
Adam Bellaire

Reputation: 110429

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.

Upvotes: 0

redsquare
redsquare

Reputation: 78667

You can use the beforeShowDay function to set disabled dates.

See here for a full explanation.

Upvotes: 1

Related Questions