Customization in React Daterangepicker component

24 Jan 202313 minutes to read

DateRangePicker makes available for the UI customization which can be achieved with events, properties that are available with this component.

Day cell format

renderDayCell is a event which provides the option to customize each day cell while rendering itself.
The following example disables the weekends of every month using renderDayCell event. Here we have used the e-disabled class to highlight the disabled date

[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 {
    onRenderDayCell(args) {
        if (args.date.getDay() === 0 || args.date.getDay() === 6) {
            // sets isDisabled to true to disable the date.
            args.isDisabled = true;
        }
    }
    render() {
        return <DateRangePickerComponent renderDayCell={this.onRenderDayCell} placeholder='Select a range'/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the daterangepicker component
import { DateRangePickerComponent, RenderDayCellEventArgs } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {

    public onRenderDayCell(args: RenderDayCellEventArgs): void {
        if ((args.date as Date).getDay() === 0 || (args.date as Date).getDay() === 6) {
            // sets isDisabled to true to disable the date.
            args.isDisabled = true;
        }
    }

    public render() {
        return <DateRangePickerComponent renderDayCell={this.onRenderDayCell} placeholder='Select a range' />
    }
};
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() {
    function onRenderDayCell(args) {
        if (args.date.getDay() === 0 || args.date.getDay() === 6) {
            // sets isDisabled to true to disable the date.
            args.isDisabled = true;
        }
    }
    return <DateRangePickerComponent renderDayCell={onRenderDayCell} placeholder='Select a range'/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the daterangepicker component
import { DateRangePickerComponent, RenderDayCellEventArgs } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    function onRenderDayCell(args: RenderDayCellEventArgs): void {
        if ((args.date as Date).getDay() === 0 || (args.date as Date).getDay() === 6) {
            // sets isDisabled to true to disable the date.
            args.isDisabled = true;
        }
    }
    return <DateRangePickerComponent renderDayCell={onRenderDayCell} placeholder='Select a range' />
};
ReactDOM.render(<App />, document.getElementById('element'));

First day of week

Start day in a week will differ based on culture. But, you can customize this based on application needs also. For this, you can make use of firstDayOfWeek property. By default, first day of week in en-US is a Sunday.

In following sample, it customized to Monday with help of this property.

[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 {
    startDay = 1;
    render() {
        return <DateRangePickerComponent firstDayOfWeek={this.startDay} placeholder='Select a range'/>;
    }
}
;
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<{}, {}> {

    private startDay:number = 1;

    public render() {
        return <DateRangePickerComponent firstDayOfWeek={this.startDay} placeholder='Select a range' />
    }
};
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() {
    const startDay = 1;
    return <DateRangePickerComponent firstDayOfWeek={startDay} placeholder='Select a range'/>;
}
;
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() {
    const startDay:number = 1;
    return <DateRangePickerComponent firstDayOfWeek={startDay} placeholder='Select a range' />
};
ReactDOM.render(<App />, document.getElementById('element'));

Preset ranges

DateRangePicker provides an option to set the predefined ranges in a DateRangePicker via presets properties with the corresponding label. This property will accept the values in the order of label, start date (date object), end date (date object) and append these ranges in a component for quick selection.

In following sample, you can choose the frequently using ranges options from the list of ranges itself easily.

[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 {
    presets = [
        { label: 'Today', start: new Date(), end: new Date() },
        { label: 'Last Week', start: new Date(new Date().setDate(new Date().getDate() - 7)), end: new Date() }
    ];
    render() {
        return <DateRangePickerComponent placeholder='Select a range' presets={this.presets}/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the daterangepicker component
import { DateRangePickerComponent, PresetsModel } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {

    private presets: PresetsModel[] = [
        { label: 'Today', start: new Date(), end: new Date() },
        { label: 'Last Week', start: new Date(new Date().setDate(new Date().getDate() - 7)), end: new Date() }
        ];

    public render() {
        return <DateRangePickerComponent placeholder='Select a range' presets={this.presets} />
    }
};
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() {
    const presets = [
        { label: 'Today', start: new Date(), end: new Date() },
        { label: 'Last Week', start: new Date(new Date().setDate(new Date().getDate() - 7)), end: new Date() }
    ];
    return <DateRangePickerComponent placeholder='Select a range' presets={presets}/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the daterangepicker component
import { DateRangePickerComponent, PresetsModel } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App(){
    const presets: PresetsModel[] = [
        { label: 'Today', start: new Date(), end: new Date() },
        { label: 'Last Week', start: new Date(new Date().setDate(new Date().getDate() - 7)), end: new Date() }
        ];

    return <DateRangePickerComponent placeholder='Select a range' presets={presets} />

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

See Also