How to disable day of the week based on form field and global variable using JQuery datepicker?
I am trying to disable certain days of the week based on a global variable that is set via javascript but is initially filled in 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, ''];
}
}
});
});
Here are all the time constraints I need:
- No Sunday, Monday, or Saturday. Done.
- Today, tomorrow, and all previous dates are inactive. Done.
Unless the user selects Tennessee, Kentucky from Alabama.
- Tuesday should be inactive.
- Today + 2 (the day after tomorrow) should be inactive.
Ideally, all dates will be inactive until the user selects shipping_state
.
+3
source to share
2 answers
I used an array disabled_days
to indicate which days to disable. syntax like "onchage =" "inside html markup is not very good, you need to fix itthis.form.shipping_zip.value='';check_address('shipping');
inside the change
handler, +2 days calculated in the option minDate
.
$(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');
});
+1
source to share
Visit jqfaq.com for more interesting 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, ''];
}
}
}
});
+1
source to share