How to set day header in EJ2 JavaScript DateRangePicker

4 Sep 20264 minutes to read

The format of the day displayed in the header can be changed using the dayHeaderFormat property. By default, the format is Short.

The possible formats are listed 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. 
var daterangepickerObj = new ej.calendars.DateRangePicker({
        dayHeaderFormat: "Short",
        cssClass: "format-wide"
    });
    daterangepickerObj.appendTo('#element');

    var formatLabel = new ej.dropdowns.DropDownList({
        // set the height of the popup element
        popupHeight: '200px',
        // bind the change event
            change: function(args) {
                 daterangepickerObj.dayHeaderFormat = args.value;
            }
    });
    formatLabel.appendTo('#select');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DateRngePicker 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="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <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>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>