Date Range in React Calendar

4 Sep 20265 minutes to read

The React Calendar provides an option to select a date within a specified range using the min and max properties. The min date must be less than the max date. If min is greater than max, the React Calendar will not render the valid view and the configuration should be treated as invalid.

The example below allows selection of a date within the range from the 7th to the 27th of a month.

[Class-component]

// import the calendarcomponent
import { CalendarComponent } 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 calendar 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 <CalendarComponent id="calendar" value={this.dateValue} min={this.minDate} max={this.maxDate}/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the calendarcomponent
import { CalendarComponent } 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 calendar 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 <CalendarComponent id="calendar" value={this.dateValue} min={this.minDate} max={this.maxDate} />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    // creates a calendar 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 <CalendarComponent id="calendar" value={dateValue} min={minDate} max={maxDate}/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {

     // creates a calendar 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 <CalendarComponent id="calendar" value={dateValue} min={minDate} max={maxDate} />

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

If you change the min or max properties programmatically, update the value property to ensure it falls within the new range. If the current value is less than min, it will be updated to min. If it is greater than max, it will be updated to max.