How to Disabling Specific Months in a React MonthPicker

To disable certain months in a MonthPicker, such as July and August, you can utilize the navigated and open events in conjunction with a disableCell function. This method allows for the dynamic addition of the e-disabled class to the cells representing the months you wish to disable, effectively preventing their selection.

Here is a sample implementation in React:

const Disabled = () => {
    const [valueDate, setValueDate] = useState('');
    const [formatDate, setFormatDate] = useState('dd MMMM y');
    var datepickerInstance;

    const navigated = (args) => {
      disableCell(args);
    };

    const open = (args) => {
      disableCell(args);
    };

    function disableCell(args) {
      if (datepickerInstance.popupObj) {
        var cellElement =
          datepickerInstance.popupObj.element.querySelectorAll(
            '.e-content .e-cell'
          );
        for (var i = 0; i < cellElement.length; i++) {
          if (cellElement[i].innerText === 'Jul' || cellElement[i].innerText === 'Aug') {
            cellElement[i].classList.add('e-disabled');
          }
        }
      }
    }

    return (
      <div id="datePicker" className="datepicker-control-section col">
        <DatePickerComponent
          change={(e) => setValueDate(e.value ? e.value : valueDate)}
          value={valueDate}
          ref={(calendar) => {
            datepickerInstance = calendar;
          }}
          start={'Year'}
          depth={'Year'}
          navigated={navigated}
          open={open}
        />
      </div>
    );
};

1. Set Up State Variables: Initialize state variables to manage the selected date and format.
2. Define Event Handlers: Create event handlers for the navigated and open events to call the disableCell function.
3. Disable Specific Months: In the disableCell function, check each cell’s content. If it matches “Jul” or “Aug”, add the e-disabled class to disable those cells.

By following the above steps and utilizing the provided code snippet, you can effectively disable specific months in a month picker, enhancing the user experience by preventing the selection of unwanted dates.

Sample: https://stackblitz.com/edit/react-gxcary-janewqat?file=index.js

Additional References

• open event
• navigated event