Getting started with JavaScript DatePicker control

08 May 2023 / 3 minutes to read

This section briefly explains how to create a simple DatePicker component and configure its available functionalities in TypeScript, using Essential JS 2 quickstart seed repository.

Dependencies

The following list of dependencies is required to use DatePicker component in your application.

|-- @syncfusion/ej2-calendars
  |-- @syncfusion/ej2-base
  |-- @syncfusion/ej2-data
  |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-splitbuttons
  |-- @syncfusion/ej2-lists
  |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-buttons

Set up your development environment

To get you started with DatePicker component, you can clone the Essential JS 2 quickstart application and install the packages by using the following commands.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

The application is configured with all the EJ2 dependencies. For better understanding, remove common settings (src/styles/styles.css, system.config.js ) to get started with the DatePicker component.

Refer to the DatePicker component dependencies in system.config.js configuration file.

[src/system.config.js]

System.config({
paths: {
    'npm:': './node_modules/',
    'syncfusion:': 'npm:@syncfusion/'
},
map: {
    app: 'app',

    //Syncfusion packages mapping
    "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
    "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
    "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
    "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
    "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
    "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
    "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
    "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
},
packages: {
    'app': { main: 'app', defaultExtension: 'js' }
}
});

System.import('app');

Adding Style sheet to the Application

To render the DatePicker component, need to import DatePicker and its dependent component’s styles as given below in style.css.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";

If you want to refer the combined component styles, please make use of our CRG (Custom Resource Generator) in your application.

Add DatePicker to the application

Add the HTML input element for DatePicker into your index.html file.

[src/index.html]

<!DOCTYPE html>
<html lang="en">

<head>
<title>Essential JS 2 DatePicker component</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!--style reference from app-->
<link href="/styles/styles.css" rel="stylesheet" />

<!--system js reference and configuration-->
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
<script src="system.config.js" type="text/javascript"></script>
</head>

<body>
<div style="margin: 50px;">
    <!--element which is going to render the DatePicker-->
    <input id="element"/>
</div>

</body>

</html>

Now import the DatePicker component into your app.ts and append it to #element [src/app/app.ts]

import { DatePicker } from '@syncfusion/ej2-calendars';

// initialize datepicker component
let datepickerObject: DatePicker = new DatePicker();
// render initialized datepicker
datepickerObject.appendTo('#element');

Run the application

Now use the npm run start command to run the application in the browser.

npm run start

The below example shows a basic DatePicker.

Source

Preview

app.ts

index.html

import { DatePicker } from '@syncfusion/ej2-calendars';
// creates a simple datepicker component
let datepickerObject: DatePicker = new DatePicker({
// sets the placeholder
placeholder: 'Enter date'
});
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/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/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>

Setting the value, min and max dates

The following example demonstrates how to set the value, min and max dates on initializing the DatePicker. Here you can able to select a date within a range from 9th to 15th.