Level 43
@vincent15000 since the component is using date-fns, did you import the correct locale from date-fns/locale? https://date-fns.org/v2.27.0/docs/I18n#usage
1 like
Apr 29, 2024
5
Level 63
@vuepic/vue-datepicker : in trouble with the formatting options
Hello,
I'm trying to format the binding model and the preview for this component, but it doesn't work as expected.
<vue-date-picker
v-model="date"
locale="fr-FR"
format="yyyy-MM-dd"
preview-format="dd/MM/yyyy"
:id="props.id"
class="w-full outline-none border border-yggdra-light rounded"
></vue-date-picker>
{{ date }}
No matter what format I write for any format or preview-format attributes, the date is always returned like this.
Tue Apr 30 2024 09:14:00 GMT+0200 (heure d’été d’Europe centrale)
In the documentation the format attribute is the formatting of the date for the returned value and the preview-format is the formatting of the date for what is displayed in the input field.
When I modify the format attribute, it only modifies what is displayed in the input field. And I can write anything in the preview-format attribute, nothing happens.
It sounds like a bug, but perhaps I'm doing something wrong ?
For the moment the only way I have found is to use moment and format the returned value. But the datepicker package should do that automatically, shouldn't it ?
Can somebody try it ?
Thanks a lot ;).
Thanks for your help.
V
Level 63
@Amaury No but does it have something to do with the formatting when I use a custom format as a string for the attribute ?
I will try this and I tell you if it works.
Level 6
Use :model-type to specify the output format to the v-model variable.
https://vue3datepicker.com/props/general-configuration/#model-type
The input field is formatted using the format https://vue3datepicker.com/props/formatting/
The preview format feature applies to the preview which appears at the bottom of the popup calendar.
So, in your example try:
<vue-date-picker
v-model="date"
locale="fr-FR"
:model-type="yyyy-MM-dd"
:format="dd/MM/yyyy"
:id="props.id"
class="w-full outline-none border border-yggdra-light rounded"
></vue-date-picker>
1 like
Level 63
@Max100 Thank you, this is exactly what I need. I didn't read enough the general configuration.
Level 6
I know what you mean. The vue datepicker component (vuepic/vue-datepicker) has a lot of features and the docs and examples can be less than helpful sometimes. But overall it's a good package.
1 like
Please or to participate in this conversation.