van 时间组件 出生日期

2020-12-28  本文已影响0人  流泪手心_521
 <van-field
                          v-model="form.birthday"
                            name="出生日期"
                            label="出生日期"
                            placeholder="请输入"
                            input-align="right"
                            :rules="[{ required: true, message: '请填写出生日期' }]"
                            @click="showCard=true"
                            />
                            <van-popup v-model="showCard" position="bottom">
                                <van-datetime-picker
                                        v-model="currentDate"
                                        type="datetime"
                                        format="YYYY-MM-DD"
                                        :min-date="minDate"
                                        :max-date="maxDate"
                                        @confirm="confirmChange"
                                        @cancel="cancelChange"
                                />
 </van-popup>

data里面定义的数据传给后台的

  data(){
        return {
            //日期--出生年月日
            showCard: false,
            minDate: new Date(),
            maxDate: new Date(2200, 1, 1),
            currentDate: new Date(),
            form:{
                birthday:'',//出生年月
                foundDate:'',//成立时间            }
        }
    },

methods

// 确认时间
        confirmChange(value) {
            this.showCard = false;
            this.currentDate = value;
            this.form.birthday = this.timeFormat(value);
        },
        timeFormat(time) { // 时间格式化 2019-09-08
            let year = time.getFullYear();
            let month = time.getMonth() + 1;
            let day = time.getDate();
            let h = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
            let m = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
            let s = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
            return year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s;
        },
        // 取消时间
        cancelChange() {
            this.showCard = false;
        },
上一篇 下一篇

猜你喜欢

热点阅读