<template>
    <div>
        <van-field v-model="modelName" is-link readonly  :name="data.id" :label="data.name" :placeholder="data.placeholder" @click="showCalendar = true" :rules="[{ validator: validator }]"/>
        <van-calendar v-model="showCalendar" @confirm="onConfirm" :min-date="data.minDate||new Date(1990,1,1)" :max-date="data.maxDate|| new Date()" />
    </div>
</template>

<script>
import {
    ref,
} from "vue"
export default {
    props: {
        data: {
            type: Object
        },
        validator:{
            type:Function
        }
    },
    setup() {
        const showCalendar = ref(false),
            modelName = ref(null);
        const onConfirm = (date) => {
            modelName.value = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            showCalendar.value = false;
        };
    
        return {
            modelName,
            showCalendar,
            onConfirm,
        }
    }
}
</script>

<style lang="less" scoped>

</style>
