How to make input readonly in EJ2 JavaScript DatePicker

04 Sep 20262 minutes to read

The following example demonstrates how to set readonly in the DatePicker component. This can be achieved by using the readonly property.

index.js

var datepicker = new ej.calendars.DatePicker({
        placeholder: 'Choose a date',
            // sets the readonly.
    readonly:true,
    // sets the value.
    value:new Date()    
    });
    datepicker.appendTo('#element');

index.html

<!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/35.1.37/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.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>