Open datepicker popup on input click in Vue Datepicker component

28 Feb 20231 minute to read

You can open the DatePicker popup on input focus by calling the show method in the input focus event.

The following example demonstrates how to open the DatePicker popup when the input is focused.

app.vue

<template>
  <div id="app">
        <div class='wrap'>
           <ejs-datepicker ref="dateObj" id='date' placeholder="Choose a date" :focus='onFocus'></ejs-datepicker>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars";

Vue.use(DatePickerPlugin);
export default {
    methods:{
        onFocus: function(args){
            this.$refs.dateObj.show();
        }
    }
}
</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>