[Feature Request] v-date-input should allow to set a custom ISO 8601 date format (e.g. YYYY-MM-DD)

[ian-ng]

Problem to solve

I want to uniform the date format to "YYYY-MM-DD" (ISO 8601 format) to avoid user mistakes. (current version is: mm/dd/yyyy, which is a confusing date format)

Proposed solution

adding a props like below: <v-date-input ... date-format="YYYY-MM-DD" />

[EDM115]

https://github.com/vuetifyjs/vuetify/assets/82015596/499b6890-6f27-4935-91d1-9524ada570c3

As you can see, typing DD/MM/YYYY doesn't work, but typing MM/DD/YYYY will work but will then be displayed as DD/MM/YYYY.
Note that my system is in French, and browser in English. dunno if it affects the component's logic

[ian-ng]

2024-06-13_10-31-50.mp4 As you can see, typing DD/MM/YYYY doesn't work, but typing MM/DD/YYYY will work but will then be displayed as DD/MM/YYYY. Note that my system is in French, and browser in English. dunno if it affects the component's logic

I have looked into the component, it seems affected by the Vuetify locale setting.

Currently, I am showing the date input in the old way (v-menu + v-text-field + v-date-picker ), and handling the date format with v-text-field.

[Sko007]

Would be a great feature. :)

[jaketig]

Workaround: If you change your locale to en-CA the dates will be formatted as YYYY-MM-DD by default. The placeholder is hardcoded to 'mm/dd/yyyy' still though.

createVuetify({
  locale: {
    locale: 'en-CA',
  },
})

[gabystallo-zt]

+1 this is a fundamental feature

[hiadev]

+1

[KentuckyMC]

This is indeed fundamental. Got the same behaviour as @EDM115 . It always shows mm/dd/yyyy. When entering it that way, for example: 02-01-2024. It will go to 2 January, it shows that way in the datepicker as well. And in the textfield it also shows 02-01-2024. That's the way we want it, I've combined vuetify with my Vue-i18n which works great. Also the calendar is showing in the right order, with Monday first.

Will be very nice it also understand that the placeholder is going with the dd/mm/yyyy way.

[EvgenyVetrov]

+1 must have date format parametr!

i need in dd.mm.yyyy format

[tmedina92]

is there any news on this feature? is a very usefull one

[etienne-monier]

I agree !

[Kartikeya-chatterbug]

+ 1 waiting for this feature since my entire application depends on dates

[vdovenkoego]

+1 We are really looking forward to it!

[ludiccc]

I manage to handle this by adding a :formatters parameter and implementing that function like follows:

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

And the script function:

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}`;
  },
};

--- edit ---

It appears that this code is only useful if you use 'vite-plugin-vuetify'.

[Lynvmili]

You can try the following:

1. Set locale in func createVuetify is your locale:

2. Set placeholder="dd/mm/yyyy", it's only placeholder

3. it's work for my locale:

[clozyq]

Having the same issues. Updating locale didn't work for me. I can format the date to display and return dates in format dd/mm/yyyy but when I open the date picker, it displays the day value as the month i.e. the 8th takes you to August. If you select any date above the 12th of a month then the whole page errors so it's basically unusable.

Has there been any update on this?

[dcrystalj]

My date is displayed correctly, but when manually modifying date in the input, modifying month actually modifies day and vice versa.

[hiadev]

use display-format prop

[dcrystalj]

use display-format prop

format prop respects formatting but manual input does not

[ikushum]

This has been done by https://github.com/vuetifyjs/vuetify/commit/d177272641eeb988950e4f77776636f703106500

Documentation - Click here Example - Click here

[ikushum]

use display-format prop

format prop respects formatting but manual input does not

~~Seems to work for me. If you think this is a bug, you can kindly create a new issue from here~~

~~Please also check if it is not a duplicate of this - https://github.com/vuetifyjs/vuetify/issues/19803~~

It is a known issue https://github.com/vuetifyjs/vuetify/issues/19803