Set the Placeholder in JavaScript (ES5) DateTimePicker control

23 Mar 2023 / 1 minute to read

The following example demonstrates how to set placeholder in the DateTimePicker component.

Using placeholder you can display a short hint in the input element.

Source

Preview

index.js

index.html

var datetimepickerObject = new ej.calendars.DateTimePicker({
    // sets the value
    value: new Date('5/25/2017 4:00 PM'),
    //sets the min
    min: new Date('5/5/2017 2:00 PM'),
    //sets the max
    max: new Date('5/25/2017 3:00 PM'),
    // sets the placeholder
    placeholder: 'Select a date and time'
    });
    datetimepickerObject.appendTo('#element');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 DateTimePicker 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">
    <!--style reference from the DateTimePicker component-->
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/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>