Open datepicker popup on input click in Vue Datepicker component

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

<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 setup>
  
  import { DatePickerComponent as EjsDatepicker } from "@syncfusion/ej2-vue-calendars";
  import { ref } from 'vue';
  
  const dateObj = ref(null);
  const onFocus = () => {
    dateObj.value.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>
<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 { DatePickerComponent } from "@syncfusion/ej2-vue-calendars";

export default {
    name: "App",
    components: {
        "ejs-datepicker": DatePickerComponent
    },
    methods: {
        onFocus: function () {
            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>