如何根据表单字段和带有Jquery datepicker的全局变量禁用一周中的某一天?

时间:2013-02-01 07:58:07

标签: jquery forms datepicker jquery-ui-datepicker

我试图根据全局变量禁用一周中的某些天,该变量是通过javascript设置的,但最初是由用户通过表单字段(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());"/>

这是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

以下是我需要的所有日期限制:

  1. 周日,周一或周六没有。完成。
  2. 今天,明天以及之前的所有日期均无效。完成。
  3. 如果用户没有选择阿拉巴马州的田纳西州肯塔基州。

    1. 星期二需要处于非活动状态。
    2. 今天+ 2(后天)需要处于非活动状态。
    3. 理想情况下,在用户选择shipping_state之前,所有日期都将处于非活动状态。

2 个答案:

答案 0 :(得分:1)

我使用数组disabled_days来指示要禁用的天数。 像html标记里面的'onchage =“”'这样的语法不好,你需要在this.form.shipping_zip.value='';check_address('shipping');处理程序中修复change 你自己, 在minDate选项中计算+2天。

$(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

答案 1 :(得分:1)

访问jqfaq.com,了解有关解决方案的更多有趣常见问题解答。这是您的最新工作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, ''];
                    }
            }
        }
    });