Search results

Disable the DateRangePicker Component in React DateRangePicker component

18 May 2022 / 1 minute to read

DateRangePicker can be inactivated on a page, by setting enabled value as false which will disable the component completely from all user interactions including in the form post. The following example demonstrate the disabled component.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
// 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 {
    constructor() {
        super(...arguments);
        this.disable = false;
    }
    render() {
        return <DateRangePickerComponent placeholder='Select a range' enabled={this.disable}/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
// 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'));