Search results

Date Format in JavaScript DatePicker control

Date format is a way of representing the date value in different string format in the textbox.

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

Once the date 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 Format section.

The following example demonstrates the DatePicker with the custom format (yyyy-MM-dd).

Source
Preview
app.ts
index.html
import { DatePicker } from '@syncfusion/ej2-calendars';
// creates a DatePicker component with custom format.
let datepickerObject: DatePicker = new DatePicker({
    value: new Date(),
    // sets the format.
    format: 'yyyy-MM-dd'
});
datepickerObject.appendTo('#element');
<!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="//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-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>