Search results

Prevent the Popup Close in React DatePicker component

18 May 2022 / 1 minute to read

To prevent the DatePicker popup from closing, use the preventDefault method

The following example demonstrates how to prevent the popup from closing.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
// 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'));
Copied to clipboard
// 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'));