javascriptkendo-uikendo-gridkendo-asp.net-mvckendo-datepicker

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


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",], });


Solution

  • 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" />