Date views in EJ2 JavaScript 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.
var datepicker = new ej.calendars.DatePicker({
placeholder: 'Choose a date',
//sets the start
start:'Decade'
});
datepicker.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/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<input id="element" type="text">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
var datepicker = new ej.calendars.DatePicker({
placeholder: 'Choose a date',
//sets the start
start:'Decade',
//sets the depth
depth:'Year'
});
datepicker.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/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<input id="element" type="text">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
To know more about Calendar views refer the Calendar’s Calendar Views section.