Close PrimeVue (Vue js) Calendar on custom button click

user_7009040 0
Viewed 425

We have a PrimeVue calendar (with a time picker) component. We have added a close button in the footer to close the calendar when that button is clicked.

The problem is that when we try to close the calendar component on button click, it does not close. It also does not throw an error.

This is the code that we have so far:

<Calendar
   id="start"
   ref="dateSelect"
   v-model="matchModel.startDate"
   placeholder="Start date"
   :showTime="true"
   :showIcon="true"
   :yearNavigator="true"  
   :monthNavigator="true"
   yearRange="1910:2030"
   >
   <template #footer>
      <button v-on:click="$emit('hide')">Close</button>
   </template>
</Calendar>

Please may you assist on how we can close the calendar component when the close button is clicked

primevue vue.js
1 Answers

although it's late, I hope can help the people who encounter such a problem like us.

  1. add ref property to Calendar component

    <Calendar dateFormat="yy-mm-dd"
           :max-date="maxDate" :min-date="minDate"
           selectionMode="range" v-model="product.range"
           :hideOnDateTimeSelect="true" show-icon="true"
           ref="ca"
 >
   <template #footer>
     <Button v-on:click="closeCalendar()" class="button">应用</Button>
   </template>
 </Calendar>

  2. add ref name to setup method

    setup:{
  const ca = ref()
  const closeCalendar()=>{
      ca.value.overlayVisible = false
  }
  return {closeCalendar,ca}
}
user_12298260
Related