How to use <v-date-input> in a vue component to accept a date?

In a Vue 3 project, I am trying to use the Vuetify in a vue component and display it in YYYY-MM-DD format.

After importing VDateInput with

import { VDateInput } from 'vuetify/labs/VDateInput';

I use the date picker in the following way:

<v-date-input
  :modelValue="getDate"
  color="primary"
  format="YYYY-MM-DD"
      />

On clicking , it does open the date picker, however, the displayed date is in MM/DD/YYYY format.

Questions:

1. How do I change the data format to YYYY-MM-DD. Looks like, I need to do something with getDate(), but how?
2. How do I get the selected date from the , and in case I need to pass a date to the date picker, how do I do it?

Thanks for your help.

You need to add a script for a custom formatting. The component should be called like this:

<v-date-input
label="Date format (YYYY/MM/DD)"
v-model="dateValue"
:value="dateValue.toISOString().substr(0, 10)"
:formatters="customFormatter"
></v-date-input>

And your script should implement something like this:

const customFormatter = {
  date: (val) => {
    if (!val) return null;
    const date = new Date(val);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const day = date.getDate().toString().padStart(2, "0");
    return `${year}/${month}/${day}`;
  },
};

Sadly, this is not documented anywhere.