Search results

DateTime Format in JavaScript (ES5) DateTimePicker control

DateTime format is a way of representing the date and time value in different string format in the textbox.

By default, the DateTimePicker’s format is based on the culture. You can also set the own custom format by using the format property.

Once the format property has been defined it will be common to all the cultures.

To know more about the date format standards, refer to the Internationalization Date Time Format section.

The following example demonstrates the DateTimePicker with the custom format (yyyy-MM-dd hh:mm).

Source
Preview
index.js
index.html
var datetimepicker = new ej.calendars.DateTimePicker({
        placeholder: 'Choose a date',
        value: new Date(),
    // sets the format.
    format: 'yyyy-MM-dd hh:mm'
    });
    datetimepicker.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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/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>