Customize the datepicker day header in EJ2 TypeScript Datepicker control
26 Apr 20234 minutes to read
You can change the format of the day that to be displayed in header using dayHeaderFormat
property. By default, the format is Short
.
You can find the possible formats on below.
Name | Description |
---|---|
Short |
Sets the short format of day name (like Su ) in day header. |
Narrow |
Sets the single character of day name (like S ) in day header. |
Abbreviated |
Sets the min format of day name (like Sun ) in day header. |
Wide |
Sets the long format of day name (like Sunday ) in day header. |
import { DatePicker } from '@syncfusion/ej2-calendars';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
// creates datepicker component
let datepickerObject: DatePicker = new DatePicker({
dayHeaderFormat: "Short"
});
datepickerObject.appendTo('#element');
let formatLabel: DropDownList = new DropDownList({
// set the height of the popup element
popupHeight: '200px',
// bind the change event
change: (args: any) => {
datepickerObject.dayHeaderFormat = args.value;
}
});
formatLabel.appendTo('#select');
<!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.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-dropdowns/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' />
</div>
<div id="format">
<label class="custom-input-label">Header Format Types</label>
<div id="wrapper">
<select id="select" class="form-control">
<option value="Short" selected>Short</option>
<option value="Narrow">Narrow</option>
<option value="Abbreviated">Abbreviated</option>
<option value="Wide">Wide</option>
</select>
</div>
</div>
</body>
</html>