How to access datepicker in VueJS F7 5.2.0

Hi,

I couldn’t find a way to access the datepicker in Vue F7 5.2.0 - I have a button and this button should set the date of the datepicker to the current date. If the user wants to change it later it should be possible too - but for most cases current date is the correct date.

I’ve found this thread but it’s not helping: [SOLVED] How to update calendar date after initalized?

This is my element:

<f7-list-input
                        :calendar-params="datePickerParamsStart"
                        :disabled="!inputActivity"
                        :label="$t('tracking.inputStartLabel')"
                        type="datepicker"
                        v-model="inputBeginTime"
                >
                </f7-list-input>

datePickerParamsStart: {
      timePicker: true,
      timePickerFormat: {hour: 'numeric', minute: 'numeric'},
      dateFormat: 'yyyy-mm-dd HH::mm:ss',
      toolbarCloseText: 'Ok',
      timePickerPlaceholder: parentThis.$t('tracking.selectTime'),
      value: null
    }

what I’ve tried is this:

created a button with this action: this.datePickerParamsStart.value = [‘2019-12-12 13:10:55’];
But I guess I need to update the element to make it work. But I couldn’t find out how to update it.

Thanks for your help!

v-model is not supported, use combination of value and @calendar:change like in examples:

<f7-list-input
  type="datepicker"
  placeholder="Select date" readonly
  :calendar-params="{dateFormat: { weekday: 'long', month: 'long', day: '2-digit', year: 'numeric' }}"
  :value="inputBeginTime"
  @calendar:change="(value) => inputBeginTime = value"
/>

As a value it accepts array of dates:

data() {
  return {
    inputBeginTime: [ new Date(2019, 11, 12, 13, 10, 55) ]
  }
}

And on your button click you will just need to update component’s inputBeginTime with new value