Date views in EJ2 TypeScript Datepicker control

26 Apr 20235 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.

import { DatePicker } from '@syncfusion/ej2-calendars';
 //creates a datepicker with year view.
let datepickerObj: DatePicker = new DatePicker({
    // sets the placeholder
    placeholder:'Enter date',
    //sets the start
    start:'Decade'
});
datepickerObj.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 DatePicker control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <input id='element' type="text" />
    </div>
</body>

</html>

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.

import { DatePicker } from '@syncfusion/ej2-calendars';
//creates a datepicker with decade view and navigate up to year view.
let datepickerObj: DatePicker = new DatePicker({
    //sets the start
    start:'Decade',
    //sets the depth
    depth:'Year',
    // sets the placeholder
    placeholder:'Enter date',
});
datepickerObj.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 DatePicker control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <input id='element' type="text" />
    </div>
</body>

</html>

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