Question

I have the following code:

$(document).ready(function(){

   $(".datepicker").each(function() {

     $(this).datepicker({
    beforeShowDay: function(date){ return [$(this).parent().find("span.days").html(), ""] },

     });
   });

  });

With this body code…

<div>
<span class="days">(date.getDay() == 1 || date.getDay() == 4)</span>
<input type="text" class="datepicker">
</div>


<div>
<span class="days">(date.getDay() == 2 || date.getDay() == 5)</span>
<input type="text" class="datepicker">
</div>

What I want to be able to do is have each datepicker have different days pickable.

The way i’m trying to do this (putting the varying part of the beforeShowDay code in a span) may not be the most elegant so feel free to take my code apart and change it if necessary.

Answer 1

You could create an object keeping the pickable days, like this:

var pickable = { dp1: [1, 4], dp2: [2, 5] };
$('.datepicker').each(function() {
  $(this).datepicker({
    beforeShowDay: function(date){ 
        var day = date.getDay(), days = pickable[this.id];
        return [$.inArray(day, days) > -1, ""];
    }
  });
});​

You can give it a try here. The dp1 and dp2 are IDs of the controls..or any attribute you can map really, like this:

<input type="text" class="datepicker" id="dp1">
<input type="text" class="datepicker" id="dp2">

The concept is pretty simple, take the ID to get the array of days for this picker, then use $.inArray() to see if the day we’re on is in that array. If these day selections may be shared, don’t use an ID, instead do something like data-pickerType for the attribute, and replace this.id with $(this).attr("data-pickerType") in the code above.

Note: I left the .each() intact because I know you need it for reasons outside the current question.