aboutsummaryrefslogtreecommitdiff
path: root/resources/vue/components/courseware/CoursewareDateInput.vue
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>