Vuetify: date-format prop doesn't work on the date-picker component in 17.0-beta.1

[stoked74]

Steps to reproduce

Create a datepicker with the date-format prop and the formatted-value.sync prop in 17.0-beta.1

Versions

17.0-beta.1

What is expected ?

The format function should be called by the date picker as it is in v16

What is actually happening ?

The format function isn't called and the date doesn't format.

Reproduction Link

This behavior can be seen in example 12 on the dev docs site.

https://dev.vuetifyjs.com/components/pickers#api

I also noticed that the dev docs don't contain an example for "Date pickers - Custom format". Example 5 on the v16 docs site.

https://vuetifyjs.com/components/pickers

Screenshot from the dev docs example 12

[jacekkarczmarczyk]

date-format and formatted-value has been removed from API. You can format date just by applying your formatting function the v-model value.
This month picker example should be removed from docs though (as it was done with date picker example)

[jacekkarczmarczyk]

https://github.com/vuetifyjs/docs/commit/782c6fc22e8872dc15966a636a6fdbd698b1a054

[stoked74]

Thanks for the clarification @jacekkarczmarczyk. Definitely makes things simpler, which I like 👍

[gpassero]

@jacekkarczmarczyk Could you please provide an example of applying a formatting function to v-model without using the deprecated date-format and formatted-value props?

Ps.: I could get it working using a computed value "formattedDate" as v-model for v-text-field.

[vikegart]

@jacekkarczmarczyk

You can format date just by applying your formatting function the v-model value

How I can do that? Can't find correct example

[jacekkarczmarczyk]

https://vuetifyjs.com/components/pickers#example-5

[hrvylein]

Unfortunately this isn't working if - like in my case - i need to format the value displayed in v-text-field. I need the date to be displayed like dd.mm.YYY but always fail with adapting the example from the 1.0 docs.

Whatever I try will break a) the cancel button not resetting the input field, b) date error leading to empty picker table, c) selecting a date in the picker, clicking on cancel, opening the picker again -> previously selected date is still marked.

Any hint?

This is my form working without formatting.

<v-menu
              ref="menu"
              lazy
              :close-on-content-click="false"
              v-model="startDatePicker"
              transition="scale-transition"
              offset-y
              full-width
              :nudge-right="40"
              min-width="330px"
              :return-value.sync="sendAvailability.StartTime"
            >
              <v-text-field
                slot="activator"
                label="Startdatum*"
                v-model="sendAvailability.StartTime"
                prepend-icon="event"
                readonly
              ></v-text-field>
              <v-date-picker locale="de-de" first-day-of-week="1" v-model="sendAvailability.StartTime" no-title scrollable>
                <v-spacer></v-spacer>
                <v-btn flat color="primary" @click="startDatePicker = false">Abbrechen</v-btn>
                <v-btn flat color="primary" @click="$refs.menu.save(sendAvailability.StartTime)">OK</v-btn>
              </v-date-picker>
            </v-menu>

[jacekkarczmarczyk]

This is issue is closed, if there is a bug please create a new one using the template http://issue.vuetifyjs.com

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord