How to disable all days in month except 2nd and 4th week's Thursday in Kendodatepicker

Question

I am using kendodatepicker in HTML form for selecting dates. I want to make all dates of every month disabled and only show the 2nd and 4th weeks Thursday only to be selectable (means the user can select only 2days in a month that is Thursday).

How can I achieve that using kendodatepicker, I searched a lot on the internet but did not find something useful.

currently, I am using the function for this as:--

$("#datepicker").kendoDatePicker({ format: "dd/MM/yyyy", min: yesterday, disableDates: ["mo","tu","we","sa","su","fr",], });

Answer 1

One of the overloads of the disabledDates method is to accept a function. What you can do is:

1. Check if the date is a thursday
2. Check if the date falls on the second or fourth week of the month
3. If both one and two are true, then return false

Here is a nifty function that gets the week of the month for a given date to help with number 2: https://stackoverflow.com/a/36036273/1920035

Here is an example:

const getWeekOfMonth = (date) => {
  var firstWeekday = new Date(date.getFullYear(), date.getMonth(), 1).getDay() - 1;
  if (firstWeekday < 0) {
    firstWeekday = 6;
  }
  var offsetDate = date.getDate() + firstWeekday - 1;
  return Math.floor(offsetDate / 7);
};
$("#datepicker").kendoDatePicker({
  value: new Date(),
  disableDates: (date) => {
    date = new Date(date);
    const dayOfWeek = date.getDay();
    const weekOfMonth = getWeekOfMonth(date);
    return !(dayOfWeek === 4 && (weekOfMonth === 1 || weekOfMonth === 3));
  }
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>

<input id="datepicker" />