HelpBot Assistant

How can I help you?

Set DatePicker as read-only in React Datepicker component

21 Feb 20262 minutes to read

The DatePicker can be set to read-only mode using the readOnly property. When enabled, users can view and select dates from the calendar popup, but cannot directly edit the input field. This is useful for scenarios where date selection should be guided through the calendar interface only.

The following example demonstrates how to configure a read-only DatePicker component:

// 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 {
    readonly = true;
    render() {
        return (
        // specifies the tag for render the DatePicker component
        <DatePickerComponent readonly={this.readonly} placeholder="Enter date"/>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
// 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 readonly: boolean = true;

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

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