Topic: reset mdb-date-picker-2 with vue
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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