reset mdb-date-picker-2 with vue


Topic: reset mdb-date-picker-2 with vue

Yann R asked a year ago

How do you reset mdb-date-picker-2 with vue?

I use v-model to capture value. When there is a validation error, I would like to reset value so no date is selected but opening the calendar icon will default with today date.

For example, if user enters wrong string (letter a for example), I would like to clear the value. In this scenario, the component is not usable and it is not possible to select date with calendar (screenshot attached)

setting v-model value to "" or null does not reset the component.

If I set the value to undefined (or null or ""), the calendar is not usable as not date can be selected


Here's an example code of some DatePicker outside access features such opening, setting today or clearing the picker:

        <mdb-date-picker-2 ref="picker" v-model="date16" label="Pick your date" />
        <mdb-btn @click.native="$refs.picker.open()">Open Picker</mdb-btn>
        <mdb-btn @click.native="$refs.picker.open(), $refs.picker.today(),  $refs.picker.close()">Pick today</mdb-btn>
        <mdb-btn @click.native="$refs.picker.open(), $refs.picker.clear(),  $refs.picker.close()">Clear</mdb-btn>

In fact, to clear the picker there is a need to do it in steps: open, clear, close, as in the example.

Best regards


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.2
  • Device: Windows
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No