Prevent the popup close in Vue Datepicker component

11 Jun 20243 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.

<template>
    <div id="app">
        <div class='wrap'>
            <ejs-datepicker id='date' placeholder="Select Date" :close='onClose' :value='dateval'></ejs-datepicker>
        </div>
    </div>
</template>
<script setup>

import { DatePickerComponent as EjsDatepicker } from "@syncfusion/ej2-vue-calendars";

const onClose = (args) => {
    args.preventDefault();
}

const dateval = new Date()

</script>
<style>
@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-vue-calendars/styles/material.css";

.wrap {
    margin: 35px auto;
    width: 240px;
}
</style>
<template>
    <div id="app">
      <div class='wrap'>
        <ejs-datepicker id='date' placeholder="Select Date" :close='onClose' :value='dateval'></ejs-datepicker>
      </div>
    </div>
  </template>
  <script>
  
  import { DatePickerComponent } from "@syncfusion/ej2-vue-calendars";
  
  export default {
    name: "App",
    components: {
      "ejs-datepicker": DatePickerComponent
    },
    data() {
      return {
        dateval: new Date()
      }
    },
    methods: {
      onClose: function (args) {
        args.preventDefault();
      }
    }
  
  }
  </script>
  <style>
  @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-vue-calendars/styles/material.css";
  
  .wrap {
    margin: 35px auto;
    width: 240px;
  }
  </style>