I want to use the date picker component with localization support. I created this date picker example
HTML:
<div id="app">
<v-app id="inspire">
<v-menu
:value="showDatePicker"
max-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
:value="formattedDate"
readonly
clearable
label="Date"
v-on="on"
:rules="rules"
:required="true"
@input="selectDate"
></v-text-field>
</template>
<v-date-picker
:value="date"
:locale="currentLocale"
no-title
@input="selectDate"
/>
</v-menu>
</v-app>
</div>
JS:
new Vue({
el: '#app',
data: () => ({
showDatePicker: false,
date: '',
currentLocale: 'de',
rules: [
value => this.validateDate(value) || 'Invalid date'
]
}),
computed: {
formattedDate: function () {
const formattedDate = this.date
// !! format the date based on this.currentLocale !!
return formattedDate
}
},
methods: {
selectDate: function(newDate) {
this.showDatePicker = false;
this.date = newDate;
},
validateDate: function(date){
// !! validate iso date here !!
return true
}
}
})
https://codepen.io/anon/pen/ydZqxd?editors=1010
The date picker component itself returns the date with iso format. I want to use it but I also want to display the locale date format for the user. Things get tricky because I want to validate the date with the iso format but the textfield uses the formatted date as its value. So when it comes to the validation the textfield passes in the formatted date but this is the wrong value. It should be the iso date.
It would be cool to have something like display/value although it would make no sense for textfields...
Is there a way to pass in the iso format to the validation rules and only display the formatted date?
new Date(arbitrary valid date string).toISOString()
will give you a guaranteed valid ISO date, andthatsamedateobject.toLocaleString()
will give you the localized version.