CODEWITHSUNDEEP
javascriptjqueryuser-interface
JamesJameson
JamesJameson

Reputation: 91

jQuery Datepicker: restrict date selection based on week day

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

Upvotes: 9

Views: 9605

Answers (5)

Quentin
Quentin

Reputation: 1942

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>

Upvotes: 1

ChrisThompson
ChrisThompson

Reputation: 2008

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,""]} });

Upvotes: 8

Milimetric
Milimetric

Reputation: 13549

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

Upvotes: 15

Jeff Lambert
Jeff Lambert

Reputation: 24661

Easiest way I know of:

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

Upvotes: 0

Jarrett Widman
Jarrett Widman

Reputation: 6419

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

Upvotes: 1

Related Questions