How To

The following section explains how to customize various aspects of DateRangePicker.

Disable the component

DateRangePicker can be inactivated on a page, by setting enabled value as false which will disable the component completely from all user interactions including in the form post. The following example demonstrate the disabled component.

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

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

    private disable:boolean = false;

    render() {
        return <DateRangePickerComponent placeholder='Select a range' enabled={this.disable} />
    }
};
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>

Set the placeholder

The following example demonstrates how to set placeholder in the DateRangePicker control.

Using placeholder you can display a short hint in the input element.

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<{}, {}> {

    render() {
        return <DateRangePickerComponent 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>

Customization using cssClass

To customize UI, you can make use of cssClass which will be added to DateRangePicker component as the root CSS class. With this CSS class, you can override existing styles of DateRangePicker.

Following is the list of classes that provides flexible way to customize the DateRangePicker component.

Class Name Description
e-date-range-wrapper Applied to DateRangePicker wrapper
e-range-icon Applied to the DateRangePicker icon.
e-popup Applied to DateRangePicker popup wrapper.
e-calendar Applied to both Calendar element.
e-right-calendar Applied to right Calendar element.
e-left-calendar Applied to left Calendar element.
e-start-label Applied to start label in popup.
e-end-calendar Applied to end label in a popup.
e-day-span Applied to day span details label in a popup.
e-footer Applied to footer elements in a popup.
e-apply Applied to apply button in footer in a popup.
e-cancel Applied to cancel button in footer in a popup.
e-header Applied to Calendar header.
e-title Applied to Calendar title.
e-icon-container Applied to Calendar previous and next icon container.
e-prev Applied to Calendar previous icon.
e-next Applied to Calendar next icon.
e-weekend Applied to Calendar weekend dates.
e-other-month Applied to Calendar other month dates.
e-day Applied to each day cell of the Calendar.
e-selected Applied to Calendar selected dates.
e-disabled Applied to Calendar disabled dates.

In the following example, we have customized the DateRangePicker color of texts, background of selected text using cssClass.

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

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

    render() {
        return <DateRangePickerComponent cssClass='customCSS' 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>
#element {
    max-width: 550px;
    margin: 50px;
}

iframe {
	height: 500px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.customCSS .e-calendar .e-content .e-selected span.e-day, /* csslint allow: adjoining-classes */
.customCSS .e-calendar .e-content .e-selected span.e-day:hover, /* csslint allow: adjoining-classes */
.customCSS .e-calendar .e-content .e-today.e-selected:hover span.e-day, /* csslint allow: adjoining-classes */
.customCSS .e-calendar .e-content .e-today.e-selected span.e-day, /* csslint allow: adjoining-classes */
.customCSS .e-calendar .e-content .e-selected:hover span.e-day /* csslint allow: adjoining-classes */
{
background-color: #35b86b;
}
.customCSS .e-calendar .e-content .e-today span.e-day, /* csslint allow: adjoining-classes */ 
.customCSS .e-calendar .e-content .e-focused-date.e-today span.e-day { /* csslint allow: adjoining-classes */
border: 1px solid #35b86b;
color: #ff3337;

}
.customCSS .e-calendar .e-content .e-weekend span { /* csslint allow: adjoining-classes */
color: #ff3337;
}
.customCSS.e-date-range-wrapper .e-input-group-icon.e-icons.e-active, /* csslint allow: adjoining-classes */
.customCSS .e-btn.e-flat, /* csslint allow: adjoining-classes */
.customCSS .e-btn.e-flat:hover { /* csslint allow: adjoining-classes */
color: #35b86b;
}