Disabled the datepicker component in React Datepicker component

23 Jan 20241 minute to read

To disable the DatePicker, use its enable property.

The following example demonstrates the DatePicker in a disabled state.

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 {
    enable = false;
    render() {
        return (
        // specifies the tag for render the DatePicker component
        <DatePickerComponent enabled={this.enable} 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<{}, {}> {

    private enable:boolean = false;

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

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