[ANSWERED] html – Conditionally disabling days of the week on JQuery date picker?

Question 1

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>

Question 2

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

Bollate

[ANSWERED] html – Conditionally disabling days of the week on JQuery date picker?

By

Solution 1 :

Problem :

By

Related Post

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate