CODEWITHSUNDEEP
jqueryjquery-uidatepicker
Simon
Simon

Reputation: 1169

Restrict Days In jQuery Datepicker using checkboxes

I'd like to restrict the days in the jquery datepicker using checkboxes - I've managed so far to restrict days (hard coded) initially however am unsure how to proceed to make it dynamically change.

Here's my code so far...

<table id="selectdays">
<tr>
<td><input type="checkbox" value="sun"></td>
<td><input type="checkbox" value="mon"></td>
<td><input type="checkbox" value="tue"></td>
<td><input type="checkbox" value="wed"></td>
<td><input type="checkbox" value="fri"></td>
<td><input type="checkbox" value="sat"></td>
<td><input type="checkbox" value="sun"></td>
</tr>
</table>

<input type="text" id="datepicker">


$(function() {
    $( "#datepicker" ).datepicker({
        showOn: "button",
        buttonImage: "../images/calendar.jpg",
        buttonImageOnly: true,
        dateFormat: 'DD, MM d, yy',
        minDate: 0,
        beforeShowDay: nonWorkingDates,
});

function nonWorkingDates(date){
    var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
    var closedDays = [[Monday], [Tuesday]];
    for (var i = 0; i < closedDays.length; i++) {
        if (day == closedDays[i][0]) {
            return [false];
        }

    }
    return [true];
}

});

Upvotes: 2

Views: 1859

Answers (2)

TheVillageIdiot
TheVillageIdiot

Reputation: 40527

try this:

<table id="selectdays">
    <tr>
        <td><input type="checkbox" value="1">Monday</td>
        <td><input type="checkbox" value="2">Tuesday</td>
        <td><input type="checkbox" value="3">Wednesday</td>
        <td><input type="checkbox" value="4">Thursday</td>
        <td><input type="checkbox" value="5">Friday</td>
        <td><input type="checkbox" value="6">Saturday</td>
        <td><input type="checkbox" value="0">Sunday</td>
    </tr>
</table>

Working version:

var _selectedDays=new Array();
$(function() {
    $( "#datepicker" ).datepicker({
        showOn: "button",
        buttonImage: "css/images/calendar.png",
        buttonImageOnly: true,
        dateFormat: 'DD, MM d, yy',
        minDate: 0,
        beforeShowDay: nonWorkingDates,
    });
    $("#selectdays input:checkbox").change(function(){
        var v=$(this).attr("value")*1;
        if($(this).is(":checked")){
            if($.inArray(v,_selectedDays)<0){
                _selectedDays.push(v);
            }
        }else{
            var f=$.inArray(v,_selectedDays);
            if(f>=0){
                _selectedDays.splice(f,1);
            }               
        }
    });
});

function nonWorkingDates(date){
    var day = date.getDay();
    for(var i=0;i<_selectedDays.length;i++){
        if(day==_selectedDays[i]){return [false];}
    }       
    return [true];
}

Upvotes: 3

Jared Farrish
Jared Farrish

Reputation: 49218

A starting point could be:

<table id="selectdays">
 <tr>
  <td><input type="checkbox" value="1">Monday</td>
  <td><input type="checkbox" value="2">Tuesday</td>
  <td><input type="checkbox" value="3">Wednesday</td>
  <td><input type="checkbox" value="4">Thursday</td>
  <td><input type="checkbox" value="5">Friday</td>
  <td><input type="checkbox" value="6">Saturday</td>
  <td><input type="checkbox" value="0">Sunday</td>
 </tr>
</table>

<input type="text" id="datepicker">

$(function() {
    $( "#datepicker" ).datepicker({
        showOn: "button",
        buttonImage: "../images/calendar.jpg",
        buttonImageOnly: true,
        dateFormat: 'DD, MM d, yy',
        minDate: 0,
        beforeShowDay: nonWorkingDates,
});

function nonWorkingDates(date){
    var day = date.getDay();
    if ($('#selectdays input[value='+day+']').is(':checked')) {
        return [false];
    }

    return [true];
}

Upvotes: 0

Related Questions