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",], });
One of the overloads of the disabledDates method is to accept a function. What you can do is:
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" />