Vuetify: Value input for date picker

[qw3n]

Right now v-model is not a part of the docs for the date picker. So it is a little confusing what types of dates you can set the value too. I looked at the source code to see if that helped. It appears that the value can be falsy a Date object or a date string, but not epoch time (which usually seems like one of the best ways to store date information).

Related to this is if you use date-format function to convert the value to a non-recognizable date format then that value gets passed back in through v-model which results in undefined input. If you use computed values on the value then you can circumvent this problem, but then it seems pointless to have a date formatting option and it means you have to jump through extra hoops so that, for example, your input isn't tied directly to the date-picker. One suggestion would be I've seen some other date-pickers that offer a formatted output property separate from the original format. Perhaps someone else has a better suggestion on the best way to deal with this.

Also in looking at the source code I ran into what appears to be an error https://github.com/vuetifyjs/vuetify/blob/master/src/components/pickers/DatePicker.js on line 79

if (!isNaN(this.value) && this.value.indexOf(':') !== -1) return new Date(this.value)

The first boolean statement resolves to true if the value is actually a number, but then you are trying to use indexOf which is a string method. I'm not sure if maybe this is supposed to accept numbers (e.g. epoch time) or if it is actually just wanting date strings.

Summary

1. Add v-model to the API docs
2. Add epoch time to one of the accepted values
3. Look into maybe a better way to handle formatted dates
4. Correct the error on line 79

[johnleider]

Took care of all 4 points.

[cawa-93]

Sorry. I do not understand English well.
Now you can send a timestamp to the v-model? And get a timestamp when changing the field?

[johnleider]

Yes

[Y0hy0h]

It seems as if it is no longer possible to pass a Date object as the v-model to a v-date-picker. Was this conciously done?

I would find it convenient to pass a Date object directly, as I currently need to convert it from and to a string just for the date picker.

[jacekkarczmarczyk]

Yes, it's like this since 0.17.0, using Date object caused many problems with time zones

[Y0hy0h]

Would it be possible to reflect this restriction in the documentation? A sentence like "The v-model accepts only strings in the YYYY-MM-DD format." would clear things up a lot.

Thanks for the swift reply! :)

[adeari]

This can help for format dd/mm/yyyy
https://codepen.io/adeari/pen/ZxpXbQ?&editors=101

[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