jQuery Datepicker: restrict date selection based on week day

Question

Is it possible to make modify jQuery UI Datepicker to only allow users to select, for example, Mondays?

Answer 1

Here you go: Mondays are not selectable:

$(document).ready(function(){
    $('input').datepicker({beforeShowDay: function(date){
        return [date.getDay() != 1, ''];
    }});
});

Functioning example you can play with here: http://jsfiddle.net/RaYZ5/19/.

API documentation: http://docs.jquery.com/UI/Datepicker#event-beforeShowDay

Answer 2

Previous posts were exactly correct. but more specifically in regards to only showing mondays:

$('#date').datepicker({ beforeShowDay: function (a){a=a.getDay();return[a==1,""]} });

Answer 3

Yes, similar to this:

$("#datepicker").datepicker({ beforeShowDay: $.datepicker.noWeekends });

You would have to write a function in place of $.datepicker.noWeekends to do whatever particular thing you want.

http://docs.jquery.com/UI/Datepicker/noWeekends

Answer 4

If you want a VERY FLEXIBLE solution and deactivate whichever date you want accross a given period of time you can do the following:

$dt_str is going to be the dates you want to disable. You can structure it using PHP for example, and retrieve your dates from a database.

When the DOM is loaded, disableDates() get's called and the magic happens.

var avDays = <?php echo $dt_str ?>;

<script type='text/javascript'>

 $(document).ready(
    function(){
        // Datepicker
        $('.datepicker_event').datepicker(
        {
            inline: true,
            numberOfMonths: 2,
            beforeShowDay: disableDates 
        });
    }
)   

function disableDates(date) {

    var isAvailable = false ;

   // Find the days to deactivate
    if (avDays != null) {
        for (i = 0; i < avDays.length; i++) {
          if (date.getMonth() == avDays[i][0] - 1 && date.getDate() == avDays[i][1] && date.getFullYear() == avDays[i][2]) {
            isAvailable = true;
          }
        }
    }   

    if (isAvailable)  return [true, 'av_day'] ;
    else return [false, ''];
}

</script>

Answer 5

Easiest way I know of:

$("#datepicker").datepicker({ 
    beforeShowDay: function(date) { 
        var day = date.getDay();
        return [(day > 0 && day < 6), ''];
    } 
});