Prevent the popup close in Vue Datepicker component

5 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>