Date views in React Datepicker component

21 Feb 20266 minutes to read

The DatePicker has the following predefined views that provides a flexible way to navigate back and forth to select the date.

View	Description
month (default)	Displays the days in a month
year	Displays the months in a year
decade	Displays the years in a decade

Start view

You can use the start property to define the initial rendering view.

The following example demonstrates how to create a DatePicker with decade as initial rendering view.

[Class-component]

index.jsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// creates a datepicker with year view.
export default class App extends React.Component {
    render() {
        return <DatePickerComponent id="datepicker" start="Decade" placeholder="Enter date"/>;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

// creates a datepicker with year view.
export default class App extends React.Component<{}, {}> {

    public render() {
        return <DatePickerComponent id="datepicker" start="Decade" placeholder="Enter date"/>;
    }
}

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

[Functional-component]

index.jsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// creates a datepicker with year view.
function App() {
    return <DatePickerComponent id="datepicker" start="Decade" placeholder="Enter date"/>;
}
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

// creates a datepicker with year view.
function App(){
    return <DatePickerComponent id="datepicker" start="Decade" placeholder="Enter date"/>;
}

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

Depth view

The depth property restricts the deepest view level that users can navigate to within the calendar.

The depth value must be smaller than the start value; otherwise, the view restriction will not apply as intended.

The following example demonstrates how to create a DatePicker that allows users to select a month.

[Class-component]

index.jsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// creates a datepicker with decade view and navigate up to year view.
export default class App extends React.Component {
    render() {
        return <DatePickerComponent id="datepicker" start="Decade" depth="Year" placeholder="Enter date"/>;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

// creates a datepicker with decade view and navigate up to year view.
export default class App extends React.Component<{}, {}> {

    public render() {
        return <DatePickerComponent id="datepicker" start="Decade" depth="Year" placeholder="Enter date"/>;
    }
}

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

[Functional-component]

index.jsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// creates a datepicker with decade view and navigate up to year view.
function App() {
    return <DatePickerComponent id="datepicker" start="Decade" depth="Year" placeholder="Enter date"/>;
}
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

// creates a datepicker with decade view and navigate up to year view.
function App() {
    return <DatePickerComponent id="datepicker" start="Decade" depth="Year" placeholder="Enter date"/>;
}
ReactDOM.render(<App />, document.getElementById('element'));

To know more about Calendar views refer the Calendar’s Calendar Views section.