React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Start and Depth View in React DatePicker component

25 Sep 2022 / 2 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.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
// 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'));
Copied to clipboard
// 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'));

Depth view

Define the depth property to control the view navigation.

Always the depth view has to be smaller than the start view, otherwise the view restriction will be not restricted.

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

Source
Preview
index.jsx
index.tsx
Copied to clipboard
// 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'));
;
Copied to clipboard
// 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'));;

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

Previous
Next