How can I help you?
Customization in React Daterangepicker component
21 Feb 202613 minutes to read
The DateRangePicker component offers extensive UI customization through events and properties that enable flexible design adaptation to specific application needs.
Day cell format
The renderDayCell event provides an option to customize the appearance of each day cell during rendering. This allows for applying custom styles or disabling specific dates based on application logic.
The following example demonstrates disabling weekends in every month using the renderDayCell event and the e-disabled class:
[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
The starting day of the week varies by culture; by default, it is Sunday in the en-US culture. The firstDayOfWeek property allows customization of the week’s starting day to match application requirements or cultural preferences.
The following example demonstrates customizing the first day of week to Monday:
[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
The presets property enables predefined date ranges to be displayed in the DateRangePicker, allowing users to quickly select common ranges such as “Last 7 Days” or “This Month” without manual selection. Each preset consists of a label and corresponding start and end dates.
The following example demonstrates preset ranges for quick selection:
[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'));