Disable past dates and enable only certain future dates in datepicker

Question

I am attempting to use the jQuery datepicker, but wish to disable all past days and allow only future Thursdays. I can get it to allow Thursdays, but the minDate functionality I add doesn't work with it. This is my code:

<script>

jQuery(document).ready(function() {
    jQuery('#input_40_4').datepicker({
        beforeShowDay: function(date) { return [date.getDay() == 4, ""];}
   });
});

$(function () {
    $("#input_40_4'").datepicker({ minDate: 0 });
});

</script>

Can someone explain why these don't work together?

Answer 1

You can add more options to the datepicker by separating them by commas.

$(document).ready(function() {
    $('#input_40_4').datepicker({
        beforeShowDay: function(date) { return [date.getDay() == 4, ""];},
        minDate : 0
        // you can add more options here as well, just seperate them by commas
   });
});

The reason why they didn't work in your question was because you would overwrite the options from the datepicker created in the function on line 10 with the options from the datepicker in the documentReady section.

You were basically saying create a new datepicker with mindate:0, never mind create a new one with only Tuesdays.

Answer 2

$("#datepicker").datepicker({
    beforeShowDay: function(date) { return [date.getDay() == 3, ""];},
    minDate: 0
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css"></link>
<input type="text" id="datepicker" />

Answer 3

What is happening is you are overwriting the effects of the first datepicker call with the second one.

Put both of the options in one options object

$("#input_40_4'").datepicker({
    beforeShowDay: function(date) { return [date.getDay() == 4, ""];},
    minDate: 0
});

Demo

$("#datepicker").datepicker({
    beforeShowDay: function(date) { return [date.getDay() == 4, ""];},
    minDate: 0
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css"></link>
<input type="text" id="datepicker" />