blob: 57a5619fbee207cf40021b276591a274d0a80bc4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<template>
<input :value="formattedDate" @input="onInput" type="date" />
</template>
<script>
const fromISO8601 = (string) => new Date(string);
const toISO8601 = (date) => date.toISOString();
const pad = (what, length = 2) => `00000000${what}`.substr(-length);
export default {
props: ['value'],
data: () => ({
date: new Date(),
}),
computed: {
formattedDate() {
return `${this.date.getFullYear()}-${pad(this.date.getMonth() + 1)}-${pad(this.date.getDate())}`;
},
},
methods: {
onInput({ target }) {
const newValue = toISO8601(target.valueAsDate);
if (newValue !== this.value) {
this.$emit('input', newValue);
}
},
},
beforeMount() {
if (this.value) {
this.date = fromISO8601(this.value);
}
},
};
</script>
|