[Vuejs]-How to keep vuetify date picker in sync with input?

by

1👍

✅

I was creating a CodePen to better show my problem (as @kissu requested) and found that I had a bug on my implementation. That was why the date picker was not being updated with the typed date.

Here is the working template code:

<v-menu
  v-model="menu1"
  :close-on-content-click="false"
  transition="scale-transition"
  offset-y
  max-width="290px"
  min-width="auto"
>
  <template v-slot:activator="{ on, attrs }">
    <v-text-field
      v-model="formattedDate"
      label="Date"
      prepend-icon="mdi-calendar"
      v-bind="attrs"
      v-on="on"
      @input="dateTyped"
    ></v-text-field>
  </template>
  <v-date-picker v-model="date" no-title @input="datePicked"></v-date-picker>
</v-menu>
<p>Date inside the input field is in <strong>DD/MM/YYYY</strong> format</p>

And javascript code:

const App = {
  template: "#app-template",
  data: () => ({
    menu1: false,
    date: "2022-10-25",
    formattedDate: "25/10/2022"
  }),
  methods: {
    datePicked(date) {
      if (!date) return;
      this.formattedDate = this.formatDateForInput(date);
      this.menu1 = false;
    },
    formatDateForInput(date) {
      const [year, month, day] = date.split("-");
      return `${day}/${month}/${year}`;
    },
    dateTyped(date) {
      if (!date || date.length !== 10) return;

      console.log(date);
      this.date = this.formatDateForPicker(date);
    },
    formatDateForPicker(date) {
      const [day, month, year] = date.split("/");
      return `${year}-${month}-${day}`;
    }
  }
};

CodePen in case someone wants to check it out in action: https://codepen.io/mcarreira/pen/gOKOepQ

👤Micael

Leave a comment