HelpBot Assistant

How can I help you?

Disable the DateRangePicker component in React Daterangepicker component

21 Feb 20261 minute to read

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

The following example demonstrates a disabled DateRangePicker component:

// import the datepickercomponent
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    disable = false;
    render() {
        return <DateRangePickerComponent placeholder='Select a range' enabled={this.disable}/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the datepickercomponent
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

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

    private disable:boolean = false;

    public render() {
        return <DateRangePickerComponent placeholder='Select a range' enabled={this.disable} />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));