Date range in React Datepicker component

21 Feb 20265 minutes to read

The DatePicker component restricts date selection to a specified range using the min and max properties. The min value must be less than the max value.

When a selected date is out-of-range or invalid, the model value is set to the out-of-range value or null respectively, and the input is highlighted with an error class to indicate the date validation failure.

The value property behavior depends on both the min/max range and the strictMode property. With strictMode enabled, out-of-range values are automatically adjusted; when disabled, invalid or out-of-range values are flagged but allowed. The following example demonstrates selecting a date within a range from the 7th to the 27th of a month.

[Class-component]

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 {
    // creates a datepicker with min and max property
    minDate = new Date(new Date().getFullYear(), new Date().getMonth(), 7);
    maxDate = new Date(new Date().getFullYear(), new Date().getMonth(), 27);
    dateValue = new Date(new Date().setDate(14));
    render() {
        return <DatePickerComponent id="datepicker" value={this.dateValue} min={this.minDate} max={this.maxDate}/>;
    }
}
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<{}, {}> {

    // creates a datepicker with min and max property
    private minDate: Date = new Date(new Date().getFullYear(), new Date().getMonth(), 7);
    private  maxDate: Date = new Date(new Date().getFullYear(), new Date().getMonth(), 27);
    private  dateValue: Date = new Date(new Date().setDate(14));

    public render() {
        return <DatePickerComponent id="datepicker" value={this.dateValue} min={this.minDate} max={this.maxDate} />;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

index.jsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // creates a datepicker with min and max property
    const minDate = new Date(new Date().getFullYear(), new Date().getMonth(), 7);
    const maxDate = new Date(new Date().getFullYear(), new Date().getMonth(), 27);
    const dateValue = new Date(new Date().setDate(14));
    return <DatePickerComponent id="datepicker" value={dateValue} min={minDate} max={maxDate}/>;
}
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';

function App() {
    // creates a datepicker with min and max property
    const minDate: Date = new Date(new Date().getFullYear(), new Date().getMonth(), 7);
    const maxDate: Date = new Date(new Date().getFullYear(), new Date().getMonth(), 27);
    const dateValue: Date = new Date(new Date().setDate(14));

    return <DatePickerComponent id="datepicker" value={dateValue} min={minDate} max={maxDate} />;
}
ReactDOM.render(<App />, document.getElementById('element'));

If the value of min or max properties changed through code behind. Then you have to update the value property to set within the range.