How can I call custom method from :calendar-params

Questions
1

hi! I want do search when the calendar window closed, my code do not work, this is my code:

     <f7-list-input   id="bjsj_end"   label="endTime"  type="datepicker" placeholder="select endtime" readonly
                        :required="true"   :value="bjsj_end_Arr"   @calendar:change="checkDateEnd"  @calendar:closed="testClose1" @calendar:close="testClose2"
                        :calendar-params="{   timePicker: true, dateFormat:  'yyyy-mm-dd HH::mm:ss', maxDate:new Date(), openIn: 'customModal', header: true, footer: true,closeByOutsideClick:true,
                             closeOnSelect:true}" v-show="showDateRange" />
     

      testClose1(){
                    console.log("---i'm closed")
                },
                testClose2(){
                    console.log("---i'm to be close")
                },
                checkDateBegin(value){
                    console.log("checkDateBegin检查日期变化1event"+value)
                    this.checkDate('begin',value)
                },
                checkDateEnd(value){
                    console.log("checkDateEnd检查日期变化event"+value)
                    this.checkDate('end',value)
                },

when i click this input ,change the value , the function @calendar:change=“checkDateEnd” can be called, I want to call my some method when close the calendar window, but the
@calendar:closed=“testClose1” @calendar:close=“testClose2” doesn’t work all.

one day later I get another idea ,I changed my code like this:

<f7-list-input id=“bjsj_end” label=“endTime” type=“datepicker” placeholder=“select endtime” readonly
:required=“true” :value=“bjsj_end_Arr” @calendar:change=“checkDateEnd”
:calendar-params=“calendar_params” v-show=“showDateRange” />

export default {
props:[‘rfid’,‘activeTab’,‘showSearch’],
name: “”,
data: function () {
return {
…
calendar_params:{timePicker: true, dateFormat:‘yyyy-mm-dd HH::mm:ss’, maxDate:new Date(), openIn: ‘customModal’, header: true, footer: true,
closeByOutsideClick:true,
on: {
opened: function () {
console.log(’ has opend’)
},
closed: function (e) {
console.log(“timevalue=”+e.getValue());// this can work
this.getLssj(1,‘CXJZ’)// this can not work
},
}
},
}
},

    mounted(){},
   methods: {
         getLssj(flag,value){
                    // do something custom
            },
      },

but it wrong , How can I call custom method when f7-list-input used type=“datepicker”? I need your help, thank you!

2

There is no such events on ListInput:

Just pass calendar events in params and store params as object:

<template>
  <!-- ... -->
  <f7-list-input :calendar-params="calendarParams" />
  <!-- ... -->
</template>
<script>
  export default {
    data() {
      const self = this;
      return {
        calendarParams: {
          // ...
          on: {
            close() {
              self.onCalendarClose();
            } 
          }
        }
      }
    },
    methods: {
      onCalendarClose() {
        // ...
      }
    }
  }
</script>
3

It’s worked! You gave me a big hand! Thanks! :grinning: