How to disable a day of the week based on form field and a global variable with Jquery datepicker?

Question

I am trying to disable certain days of the week based on a global variable which is set via javascript but initially populated by the user via a form field (shipping_state).

    <form id="myform">
    <p>State: <select id="shipping_state" onchange="this.form.shipping_zip.value='';check_address('shipping');" name="shipping_state" class="txtBoxStyle">
                                    <option value=""></option><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District of Columbia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="PR">Puerto Rico</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VI">Virgin Islands</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>   
        </p>

        <p>Delivery Date:
      <input name="my_deliverydate" type="text" id="datepicker"
      size="30" />
    </p>
    <p>ALT Delivery Date:
      <input name="my_altdeliverydate" type="text" id="altdatepicker"
      size="30" />
    </p>

    <p>
      Customer Comments:<br><textarea class="txtBoxStyle" id="custcomment" cols="55" rows="3"></textarea>
    </p>
    <p>
      Combined Comment Field:<br><textarea class="txtBoxStyle" name="ocomment" id="compcomment" cols="55"
      rows="3"></textarea>
    </p>

    <input type="button" name="submit" class="button" id="submit" value="Send" onclick="$('#compcomment').val('Delivery Date: ' + $('#altdatepicker').val() + ', Customer Comments: ' + $('#custcomment').val());"/>

Here is the Javascript

        $(function () {
          var date = new Date();
          var currentMonth = date.getMonth(); // current month
          var currentDate = date.getDate()+1; // current date
          var currentYear = date.getFullYear(); //this year
          $("#datepicker").datepicker({
            dateFormat: "DD, d MM, yy", // set main date format to Wednesday, January 10th, 2013
            altFormat: "yy-mm-dd", // set alt format to default
            altField: "#altdatepicker", //set alt date field
            changeMonth: true, // this will allow users to chnage the month
            changeYear: true, // this will allow users to chnage the year
            minDate: new Date(currentYear, currentMonth, currentDate),
            beforeShowDay: function (date) {
              if (date.getDay() === 0 || date.getDay() === 1 || date.getDay() === 2 || date.getDay() === 6) {
                return [false, ''];
              } else { 
                return [true, ''];
              }
            }
          });
        });

See this jsfiddle

Here are all the date restrictions I need:

1. No Sunday, Monday or Saturday. Done.
2. Today, tomorrow, and all previous dates inactive. Done.

If the user DOES NOT select Tennessee, Kentucky, of Alabama.

1. Tuesday needs to be inactive.
2. Today + 2 (day after tomorrow) needs to be inactive.

Ideally, all dates would be inactive until the user selects a shipping_state.

Answer 1

I used array disabled_days to indicate which days to disable. the syntax like 'onchage=""' inside html markup is not good, you will need to fix this.form.shipping_zip.value='';check_address('shipping'); yourself inside change handler, +2 days calculated in minDate option.

$(function () {
    $('#shipping_state').change(function () {
        //uncomment later;
        //this.form.shipping_zip.value='';check_address('shipping');
        var val = $(this).val();
        if ($.inArray(val, ['AL', 'KY', 'TN']) > -1) {
            disabled_days = [0, 1, 6];
            return;
        }
        disabled_days = [0, 1, 2, 6];
    });
    var disabled_days = [0, 1, 2, 3, 4, 5, 6],
        date = new Date(),
        currentMonth = date.getMonth(), // current month
        currentDate = date.getDate(), // current date
        currentYear = date.getFullYear(), //this year
        dp_config = {
            dateFormat: "DD, d MM, yy", // set main date format to Wednesday, January 10th, 2013
            altFormat: "yy-mm-dd", // set alt format to default
            altField: "#altdatepicker", //set alt date field
            changeMonth: true, // this will allow users to chnage the month
            changeYear: true, // this will allow users to chnage the year
            minDate: new Date(new Date(currentYear, currentMonth, currentDate).getTime() + 86400000 * 2),
            beforeShowDay: function (date) {
                if ($.inArray(date.getDay(), disabled_days) > -1) return [false, ''];
                return [true, ''];
            }
        };

    $("#datepicker,#altdatepicker").datepicker(dp_config);
    $('#shipping_state').trigger('change');
});

DEMO

Answer 2

Visit to jqfaq.com for more interesting faq questions with solutions. And here is your updated working fiddle

    $("#datepicker").datepicker({
        dateFormat: "DD, d MM, yy", // set main date format to Wednesday, January 10th, 2013
        altFormat: "yy-mm-dd", // set alt format to default
        altField: "#altdatepicker", //set alt date field
        changeMonth: true, // this will allow users to chnage the month
        changeYear: true, // this will allow users to chnage the year
        minDate: new Date(currentYear, currentMonth, currentDate),
        beforeShowDay: function (date) {
            var shipping_state = $("#shipping_state").val();
            switch (shipping_state) {
                case "AL":
                case "KY":
                case "TN":
                    var current = new Date();
                    var today = new Date(current.getFullYear(), current.getMonth(), current.getDate());
                    if (date.valueOf() <= today.valueOf() + 2) return [false, ''];
                    else if (date.getDay() === 0 || date.getDay() === 1 || date.getDay() === 6) {
                        return [false, ''];
                    } else {
                        return [true, ''];
                    }
                    break;
                default:
                    if (date.getDay() === 0 || date.getDay() === 1 || date.getDay() === 2 || date.getDay() === 6) {
                        return [false, ''];
                    } else {
                        return [true, ''];
                    }
            }
        }
    });