<template>
    <div>
        <!--https://youzan.github.io/vant/#/zh-CN/form#biao-dan-xiang-lei-xing---shi-jian-xuan-ze-qi-->
        <van-field
                readonly
                v-model="dateValue"
                :label="label"
                :placeholder="'点击选择'+label"
                @click="showPicker = true"
        ></van-field>
        <van-popup v-model="showPicker" position="bottom"
                   :safe-area-inset-bottom="true"
                   :close-on-popstate="true">
            <van-datetime-picker
                    :type="type"
                    v-model="currentDate"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
            ></van-datetime-picker>
        </van-popup>
    </div>
</template>

<script>
    export default {
        name: "DateTimeField",
        props: {
            label: String,
            value: {type: String, default: ''},  //默认值
            type: {type: String, default: 'date'},
            format: {type: String, default: 'yyyy-mm-dd'},
            // startDate: String
        },
        data() {
            return {
                showPicker: false,
                currentDate: new Date(),
                // minDate:this.startDate?new Date(this.startDate):new Date()
            }
        },
        computed: {
            dateValue: {
                get() {
                    return this.value
                },
                set(val) {
                    this.$emit('input', val)
                }
            },
        },
        watch: {
            showPicker: function (newVal) {
                if (newVal) {
                    this.currentDate = new Date()
                }
            }
        },
        methods: {
            onConfirm(date) {
                this.dateValue = this.$dateformat(date, this.format)
                this.showPicker = false
            }
        }
    }
</script>

<style scoped>

</style>
