React
Demos
Support
Forum
Download
Search results

Customization

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.

Source
Preview
index.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
//import the daterangepicker component
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';

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

    public onRenderDayCell(args: RenderDayCellEventArgs): void {
        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'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React DateRangePicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

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.

Source
Preview
index.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
//import the daterangepicker component
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';

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

    private startDay:number = 1;

    render() {
        return <DateRangePickerComponent firstDayOfWeek={this.startDay} placeholder='Select a range' />
    }
};

ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React DateRangePicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

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.

Source
Preview
index.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
//import the daterangepicker component
import { DateRangePickerComponent, PresetsArgs } from '@syncfusion/ej2-react-calendars';

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

    private presets: PresetsArgs[] = [
        { 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'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React DateRangePicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Previous
Next