Disable the DateTimePicker component in React Datetimepicker component

21 Feb 20261 minute to read

The DateTimePicker component can be disabled by setting the enabled property to false. A disabled DateTimePicker prevents all user interactions and appears visually distinct from an enabled state.

index.jsx

import { DateTimePickerComponent } 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 <DateTimePickerComponent id="datetimepicker" enabled={this.enable} placeholder='Select a date and time'/>;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import { DateTimePickerComponent } 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 <DateTimePickerComponent id="datetimepicker" enabled={this.enable} placeholder='Select a date and time' />;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));