Displaying Alerts for Disabled Dates in React DatePicker

This article explains how to implement an alert that triggers when a disabled date is clicked. When working with a DatePicker component, it may be necessary to inform users when they attempt to select a disabled date.

To achieve the desired functionality, you can use the following JavaScript code in your index.js file:

const onopen = (args) => {
    const disabledElements = args.popup.element.querySelectorAll(".e-cell.e-disabled.e-overlay");         
    disabledElements.forEach((element) => {            
        element.addEventListener("click", function () {         
            alert("This date " + element.innerText + " is disabled");              
        });        
    });
};

return (
    <div className='control-pane'>
        <div className='control-section'>
            <div className='datepicker-control-section'>
                <DatePickerComponent id="calendar" min={minDate} max={maxDate} value={dateValue} open={onopen}></DatePickerComponent>
            </div>
        </div>
    </div>
);

CSS Code

To ensure that the disabled dates can still be interacted with for the purpose of showing alerts, you need to modify the CSS.

Add the following styles in your index.css file:

.e-calendar .e-content td.e-disabled {
      pointer-events: auto;
      touch-action: auto;
   }

Sample

Refer to the working sample for additional details and implementation: Sample Code.