Start and Depth View
19 Feb 20241 minute 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.
@Html.EJS().DatePicker("element").Start(Syncfusion.EJ2.Calendars.CalendarView.Decade).Placeholder("Choose a Date").Render()Depth view
Define the depth property to control the view navigation.
NOTE
Always the depth view has to be smaller than the start view, otherwise the view restriction will be not restricted.
@Html.EJS().DatePicker("element").Depth(Syncfusion.EJ2.Calendars.CalendarView.Year).Start(Syncfusion.EJ2.Calendars.CalendarView.Decade).Placeholder("Choose a Date").Render()NOTE
To know more about Calendar views refer the Calendar’s Calendar Views section.