chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue

<template>
<div class="vue-component">
    <h2><a id="section-110"></a>
        {{ $t('startdate.change') }}
    </h2>
    <div>
        <div class="mb-3 row">
            <label class="col-form-label col-sm-4">{{ $t('startdate.date') }}</label>
            <div class="col-sm-8">
                <input class="form-control" type="date" v-model="startDate" @change="updateStartDate" />
            </div>
        </div>
    </div>
</div>

</template>

<script>

import { datetimeToISO, dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
import { mapState, mapGetters } from 'vuex';

export default {
    name: 'startDate',
    methods: {
        updateStartDate(event) {
            const date = event.target.value;
            // console.log(date)
            this.$store.dispatch('updateStartDate', date)
                .catch(({name, violations}) => {
                    if (name === 'ValidationException' || name === 'AccessException') {
                        violations.forEach((violation) => this.$toast.open({message: violation}));
                    } else {
                        this.$toast.open({message: 'An error occurred'})
                    }
            });
        },
    },
    computed: {
        ...mapState({
            startDate: state => dateToISO(ISOToDatetime(state.accompanyingCourse.openingDate.datetime))
        })
    }
}

</script>