CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-datepicker
Youssef Ouassou
Youssef Ouassou

Reputation: 33

Display specific days of the week UI datepicker

I would like to disable certain days like every monday or every tuesday or every monday, thursday friday, etc. on a jQuery UI datepicker.

I tried a lot of code without result. Anyone can help me!

My current code is as below:

<script type="text/javascript">
$(function() {

    var $hiddenInput = $('#travelDate');
    $('#datepicker').datepicker({dateFormat: 'yy-mm-dd'});

    $("#datepicker").datepicker("option", "minDate", 2);

    $('#datepicker').datepicker({
        inline: true
    });

    // this code not working for my example
    $("#datepicker").datepicker({
        beforeShowDay: function(date) {
            var day = date.getDay();
            return [(day != 1 && day != 2), ''];
        }
    });

    $(document).on("change", "#datepicker", function () {
        $hiddenInput.val($(this).val());
    })

});
</script>

Upvotes: 3

Views: 574

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

You're initializing the datepicker more than once. This is causing the problems. Consolidate your options into one options object and everything works fine:

$("#datepicker").datepicker({
    inline: true,
    minDate: 2,
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function (date) {
      var day = date.getDay();
      return [(day != 1 && day != 2), ''];
    }
});

Example: http://jsfiddle.net/WP29E/54/

Upvotes: 2

Related Questions