1

When the user selects a date of previous month or future month and then clicks on the clear icon in the date field..the date picker should be resetted to the current date.

Example: I am selecting the date as 03-09-2021 in the datefield from datepicker. I wish to clear the datefield now and I am clicking on the clear icon present in the datefield. The date picker does not reset to currentdate(31-08-21) but still stays on 03-09-2021 . Attaching the images for reference. Thanks in advance

![1]: https://i.stack.imgur.com/ghbiK.png

! [1]: https://i.stack.imgur.com/jYeEm.png

Deepika
  • 11
  • 1
  • 3
  • Could you please provide us with a better description of the error and maybe a snippet of the code that's causing issues. – Tarkan Aug 30 '21 at 11:50
  • @Tarkan When the user selects a date of previous month or future month and then clicks on the clear icon in the date field..the date picker should be resetted to the current date..but here in my case my issue is when I click the clear button the date picker still shows me the date/month which I selected previously – Deepika Aug 30 '21 at 12:07
  • Please see [ask] and put all your information _in your question_, not down here in comments. – isherwood Aug 30 '21 at 14:36

1 Answers1

1

Setting the value of the v-model to null will clear the datepicker.

Check this example:

Check a working solution below

You can use DayJs to make things simple

<template>
  <div>
    <!--    Clear Button  -->
    <v-btn @click="resetDate">Clear</v-btn>
    <!--Date Picker-->
    <v-date-picker v-model="myDate"></v-date-picker>
  </div>
</template>

<script>
export default {
  name: "DatePickerExample",
  data() {
    return {
      myDate: null
    };
  },
  methods: {
    resetDate() {
      let d = new Date();
      let ye = new Intl.DateTimeFormat("en", { year: "numeric" }).format(d);
      let mo = new Intl.DateTimeFormat("en", { month: "numeric" }).format(d);
      let da = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(d);
      this.myDate = `${ye}-${mo}-${da}`;
    },
    withDayJs(){
      this.myDate = dayjs().format('YYYY-MM-DD')
    }
  }
};
</script>

Check this to understand the resetDate() function.

Check this to understand the withDayJs() function.

Ernest Brayce
  • 84
  • 4