Date Time Format in EJ2 TypeScript DateTime Picker

4 Sep 20265 minutes to read

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

By default, the DateTime Picker’s format is based on the culture. A custom format can also be set 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 DateTime Picker with the custom format (yyyy-MM-dd hh:mm).

import { DateTimePicker } from '@syncfusion/ej2-calendars';
// creates a DatePicker component with custom format.
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    value: new Date(),
    // sets the format.
    format: 'yyyy-MM-dd hh:mm'
});
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="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-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/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>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <input id='element' type="text" />
    </div>
</body>

</html>

Input formats

The inputFormats property in the DateTime Picker control allows dates and times to be entered in various formats, providing flexibility in date and time entry. This property accepts an array of predefined formats that the control recognizes, enabling date input in different ways while ensuring values are parsed correctly.

When the date and time is typed in any of the specified input formats, it is automatically converted to the display format after pressing Enter, the Tab key, or when the input loses focus. This enhances the experience by allowing intuitive data entry through various custom input formats.

The following example demonstrates the DateTime Picker with multiple input formats.

import { DateTimePicker } from '@syncfusion/ej2-calendars';
// creates a DatePicker component with custom format.
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    value: new Date(),
    // sets the format.
    format: 'yyyy-MM-dd hh:mm',
    // sets the input format.
    inputFormats: ['dd/MM/yyyy hh:mm a', 'yyyyMMdd HH:mm']
});
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="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-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/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>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <input id='element' type="text" />
    </div>
</body>

</html>