vue-datepicker-next

vue-datepicker-next copied to clipboard

I have another component and add the vue-datepicker-next

<template>
    <div class="col">
        <div class="row mb-4">
            <label class="col-form-label col-form-label-sm" :class="classLayoutLabel">{{ label }} <span v-if="required" class="text-primary">*</span></label>
            <div :class="classLayoutInput">
                <date-picker
                    :disabled="disabled"
                    valueType="format"
                    :formatter="momentFormat"
                    :value="modelValue"
                    :input-class="[error ? 'form-control form-control-sm is-invalid' : 'form-control form-control-sm']"
                    @update:value="updateDateInput"
                />
                <div class="invalid-feedback" v-if="error"> {{ error }}</div>
            </div>
        </div>
    </div>
</template>

<script>

import {reactive} from "vue";
import moment from "moment";
import DatePicker from 'vue-datepicker-next';

export default {
    name: "DatePickerForm",
    components: {DatePicker},
    props: {
        label: {
            type: String,
            default: "",
        },
        classLayoutLabel: {
            type :String,
            default: "col-sm-4"
        },
        classLayoutInput: {
            type: String,
            default: "col-sm-8"
        },
        modelValue: {
            type: [String, Number],
            default: "",
        },
        error: {
            type: String,
            default: ""
        },
        disabled: {
            type: Boolean,
            default: false
        },
        required: {
            type: Boolean,
            default: false
        }
    },
    setup(props, { emit }) {
        const updateDateInput = (newDate) => {
            emit("update:modelValue", newDate)
        }

        const momentFormat = reactive({
            stringify: (date) => {
                return date ? moment(date).format('DD/MM/YYYY') : ''
            },
            parse: (value) => {
                return value ? moment(value, 'DD/MM/YYYY').toDate() : null
            }
        })

        return {
            momentFormat,
            updateDateInput
        }
    }
}
</script>

<style scoped>

</style>

In another component I am using

<date-picker-form :label="Date" required v-model="user.date"/>

but is not working. When selecting the date it does not set it in the input (update the v-model)

What am I missing ?

Please check updateDateInput is called, then check the user.data