HelpBot Assistant

How can I help you?

Range selection in React Daterangepicker component

21 Feb 202611 minutes to read

Range selection in the DateRangePicker can be customized with specific restrictions based on application requirements.

Restrict the range within a range

The min and max properties restrict the allowable date range:

  • min – Sets the minimum date that can be selected as the start date
  • max – Sets the maximum date that can be selected as the end date

In the following sample, you can select a date range from 15th date of this month to 15th date of next month.

[Class-component]

// import the daterangepicker component
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 {
    // creates a daterangepicker with min and max property
    minDate = new Date(new Date().getFullYear(), new Date().getMonth(), 15);
    maxDate = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 15);
    render() {
        return <DateRangePickerComponent id="daterangepicker" placeholder='Select a range' min={this.minDate} max={this.maxDate}/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the daterangepicker component
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<{}, {}> {

    // creates a daterangepicker with min and max property
    private minDate:Date= new Date(new Date().getFullYear(), new Date().getMonth(), 15);
    private  maxDate:Date= new Date(new Date().getFullYear(), new Date().getMonth()+1, 15);

    public render() {
        return <DateRangePickerComponent id="daterangepicker" placeholder='Select a range' min={this.minDate} max={this.maxDate} />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

// import the daterangepicker component
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    // creates a daterangepicker with min and max property
    const minDate = new Date(new Date().getFullYear(), new Date().getMonth(), 15);
    const maxDate = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 15);
    return <DateRangePickerComponent id="daterangepicker" placeholder='Select a range' min={minDate} max={maxDate}/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the daterangepicker component
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {

    // creates a daterangepicker with min and max property
    const minDate:Date= new Date(new Date().getFullYear(), new Date().getMonth(), 15);
    const  maxDate:Date= new Date(new Date().getFullYear(), new Date().getMonth()+1, 15);

    return <DateRangePickerComponent id="daterangepicker" placeholder='Select a range' min={minDate} max={maxDate} />
};
ReactDOM.render(<App />, document.getElementById('element'));

Important Behavior Notes:

When min or max properties change programmatically, update the start and end dates accordingly. If dates fall outside the specified range:

  • Without strict mode: An error class is applied to the input element to indicate validation failure
  • With strict mode enabled:
    • If both dates are less than min, both are adjusted to min
    • If both dates exceed max, both are adjusted to max
    • If only start date is below min, it is adjusted to min
    • If only end date exceeds max, it is adjusted to max

Range span

The number of days in a selected range can be restricted using minDays and maxDays properties. This ensures users select ranges within the acceptable number of days:

  • minDays – Sets the minimum number of days required between start and end dates
  • maxDays – Sets the maximum number of days allowed between start and end dates

In the following sample, the range selection should be greater than 3 days and less than 8 days else it won’t set.

[Class-component]

// import the daterangepicker component
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 {
    render() {
        return (<DateRangePickerComponent id="daterangepicker" placeholder='Select a range' minDays={3} maxDays={7}/>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the daterangepicker component
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<{}, {}> {
    public render() {
        return (
        <DateRangePickerComponent id="daterangepicker" placeholder='Select a range' minDays={3} maxDays={7} />
        )
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

// import the daterangepicker component
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<DateRangePickerComponent id="daterangepicker" placeholder='Select a range' minDays={3} maxDays={7}/>);
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the daterangepicker component
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
        <DateRangePickerComponent id="daterangepicker" placeholder='Select a range' minDays={3} maxDays={7} />
    )
};
ReactDOM.render(<App />, document.getElementById('element'));

Strict mode

When strictMode is enabled, the DateRangePicker validates that only valid date ranges within the specified constraints can be selected. If an invalid range is specified, the component reverts to the previously valid value. This mode ensures data integrity by preventing invalid selections.

[Class-component]

// import the daterangepicker component
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 {
    render() {
        return <DateRangePickerComponent id="daterangepicker" placeholder='Select a range' strictMode={true}/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the daterangepicker component
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<{}, {}> {
    public render() {
        return <DateRangePickerComponent id="daterangepicker" placeholder='Select a range' strictMode={true} />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

// import the daterangepicker component
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return <DateRangePickerComponent id="daterangepicker" placeholder='Select a range' strictMode={true}/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the daterangepicker component
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return <DateRangePickerComponent id="daterangepicker" placeholder='Select a range' strictMode={true} />
};
ReactDOM.render(<App />, document.getElementById('element'));