Prevent the popup close in EJ2 TypeScript Datepicker control

26 Apr 20232 minutes to read

To prevent the DatePicker popup from closing, use the preventDefault method from the PreventableEventArgs.

The following example demonstrates how to prevent the popup from closing.

index.ts
index.html
import { DatePicker, PreventableEventArgs } from '@syncfusion/ej2-calendars';
// creates datepicker with readonly.
let datepickerObject: DatePicker = new DatePicker({
    close: function (args: PreventableEventArgs) {
        // prevent the popup close
        args.preventDefault();
    },
    // sets the palceholder property.
    placeholder: 'Enter date'
});
datepickerObject.appendTo('#element');
// open the datepicker popup
datepickerObject.show();
<!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="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>