Conditionally disabling days of the week on JQuery date picker?

user_13675884 0
Viewed 378
<input type="radio" id="alice" name="daysOff" value="alice">
<label for="alice">Alice</label><br>
<input type="radio" id="dave" name="daysOff" value="dave">
<label for="dave">Dave</label><br>

In addition to disabling weekends, I want to disable Tuesdays on the calendar should the radio button above be on Alice and disable Wednesdays should it be on David. What if-statements should I include in the function below?

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
        $( "#datepicker" ).datepicker({
                beforeShowDay: $.datepicker.noWeekends
        });
    } );
</script>           
<p>Date: <input type="text" id="datepicker"></p>
html jquery
1 Answers

Here you go, day == 0 || day == 6 is weekend, 2 and 3 are Tuesdays, Wednesdays. Those days are defined on lines option = "2", option = "3".

I had a bit of problem displaying regular #datepicker with only weekends as a default when no radio buttons are picked, for some reason I couldn't make it work to switch it when you actually chose a radio button, It kept loading default #datepicker(with just weekend) even if values where read on radio change properly, it did not apply other day changes.

So I have resorted to to making 2end input filed with id #datepicker2 (too load 2nd #datepicker2), first one gets hidden and disabled (there is placeholder and console log check on that), they both have same name so in terms of form submit for example there are no changes.

So if your radio buttons are mandatory (currently not in question) there are few lines of code here that can be removed. Or just leave it, as all options are covered.

I hope this works for you. 

$("#datepicker").datepicker({
    beforeShowDay: function (date) {
        var day = date.getDay();
         if ( day == 0 || day == 6) {
                return [false]
            } else {
                return [true]
            }
    }
});


$('input[type=radio][name=daysOff]').change(function () {

$('#datepicker').css("display","none").attr("disabled", true);
$('#datepicker2').css("display","block").attr("disabled", false);

if ($('#datepicker').is(':disabled')){
console.log("disabled");
}else{
console.log("not disabled");
};


if (this.value == 'alice') {
    option = "2";
    $("#datepicker2").datepicker({
    beforeShowDay: function (date) {
        var day = date.getDay();
         if (day == option || day == 0 || day == 6) {
                return [false]
            } else {
                return [true]
            }
    }
});
    }
if (this.value == 'dave') {
    option = "3";
    $("#datepicker2").datepicker({
    beforeShowDay: function (date) {
        var day = date.getDay();
         if (day == option || day == 0 || day == 6) {
                return [false]
            } else {
                return [true]
            }
    }
});
    }   
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<input type="radio" id="alice" name="daysOff" class="daysOff" value="alice">
<label for="alice">Alice</label><br>
<input type="radio" id="dave" name="daysOff" class="daysOff" value="dave">
<label for="dave">Dave</label><br>

<p>Date: 
<input type="text" id="datepicker" name="datepicker" style="display:block" placeholder="datepicker">
<input type="text" id="datepicker2" name="datepicker" style="display:none" placeholder="datepicker2" disabled>
</p>

user_71589590
Related