In JQuery Date picker need to disable alternate weeks in a month

Question

Hi I am working with JQuery Datepicker, I want to disable alternate weeks.

I tried with beforeShowDay but that doesn't help for alternate weeks,

$("#datepicker").datepicker({
    beforeShowDay: function(date) { 
      return date.getDay() == 6
    }
});

Can any one help me on this please

Answer 1

We can use the getWeekNumber() function shown in this answer to return the week of the year.

With this, we can do weekNumber % 2 == 0 to restrict it to alternating weeks.

Date.prototype.getWeekNumber = function() {
  var d = new Date(+this);
  d.setHours(0, 0, 0, 0);
  d.setDate(d.getDate() + 4 - (d.getDay() || 7));
  return Math.ceil((((d - new Date(d.getFullYear(), 0, 1)) / 8.64e7) + 1) / 7);
};

$("#datepicker").datepicker({
  beforeShowDay: function(date) {
    return [date.getWeekNumber() % 2 == 0, '']
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="datepicker">

Note, the expected return of beforeShowDay is an array:

A function that takes a date as a parameter and must return an array with:

[0]: true/false indicating whether or not this date is selectable

[1]: a CSS class name to add to the date's cell or "" for the default presentation

[2]: an optional popup tooltip for this date