How to access datepicker in VueJS F7 5.2.0


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:


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:

  placeholder="Select date" readonly
  :calendar-params="{dateFormat: { weekday: 'long', month: 'long', day: '2-digit', year: 'numeric' }}"
  @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