Displaying Alerts for Disabled Dates in React DatePicker

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

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

You can see a working example of this implementation at the following link: Sample Code.