Prevent the DatePicker popup from closing in React Datepicker component

21 Feb 20262 minutes to read

The DatePicker popup can be prevented from closing by calling the preventDefault method within the close event. This is useful for scenarios where additional validation or confirmation is required before allowing the popup to dismiss.

The following example demonstrates how to prevent the DatePicker popup from closing by intercepting the close event:

index.jsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    onClose(args) {
        // prevent the popup close
        args.preventDefault();
    }
    render() {
        return (
        // specifies the tag for render the DatePicker component
        <DatePickerComponent close={this.onClose} placeholder="Enter date"/>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {

    public onClose(args: PreventableEventArgs){
     // prevent the popup close
        args.preventDefault();
    }

    public render() {
        return (
            // specifies the tag for render the DatePicker component
            <DatePickerComponent close={this.onClose} placeholder="Enter date"/>
        );
     }
 }

ReactDOM.render(<App />, document.getElementById('element'));