<vant-field-date label="發(fā)布時(shí)間" v-model="formData.publishDate" type="datetime" :max-date="new Date()"/>

<template> <div class="vant-field-date">  <van-cell   :title="label"   :class="{'readonly': readonly, 'placeholder' : text}"   :is-link="!readonly"   :required="required"   @click="show">   <!-- 顯示當(dāng)前值，沒(méi)有值顯示提示文字 -->   {{ text ? text : placeholder }}   <!-- 自定義錯(cuò)誤顯示 -->   <div    v-if="$attrs.error"    v-text="$attrs['error-message']"    class="van-field__error-message"   />  </van-cell>  <!-- 用 actionsheet 來(lái)包裹彈出層日期控件 -->  <van-actionsheet v-model="isShowPicker">   <!-- $attrs 可以把根節(jié)點(diǎn)的attr放到目標(biāo)組件上，如此可以像使用 DatePicker 組件一樣使用這個(gè)新組件 -->   <van-datetime-picker    v-bind="$attrs"    :type="type"    title="請(qǐng)選擇日期"    :min-date="minDate"    :max-date="maxDate"    @cancel="cancel"    @confirm="confirm"   />  </van-actionsheet> </div></template><script> export default {  name: 'VantFieldDate',  inheritAttrs: false, // https://cn.vuejs.org/v2/api/#inheritAttrs  props: {   value: {    type: [Number, Date],    default: undefined // 值不能是 null，DatePicker會(huì)報(bào)錯(cuò)   },   // Cell 顯示的文字   label: {    type: String,    default: null   },   // 必填的星號(hào)   required: {    type: Boolean,    default: false   },   // 只讀狀態(tài)   readonly: {    type: Boolean,    default: false   },   // 占位提示文字   placeholder: {    type: String,    default: '請(qǐng)選擇'   },   // 展示的格式化   format: {    type: String,    default: null   }  },  data() {   return {    selectedItem: null,    isShowPicker: false   }  },  computed: {   // 展示的格式化，時(shí)間提交的值是Date類型數(shù)據(jù)   formatFormula() {    if(this.format){     return this.format    } else if (this.type === 'date') {     return 'yyyy-MM-dd'    } else if (this.type === 'datetime') {     return 'yyyy-MM-dd hh:mm'    } else if (this.type === 'time') {     return 'hh:mm'    } else if (this.type === 'year-month') {     return 'yyyy-MM'    }   },   text() {    return this.value ? this.dateFormat(this.value, this.formatFormula) : ''   }  },  methods: {   dateFormat: (value, format) => {    if (!value) return    if (!(value instanceof Date)) {     value = new Date(value)    }    let o = {     'M+': value.getMonth() + 1, // month     'd+': value.getDate(), // day     'h+': value.getHours(), // hour     'm+': value.getMinutes(), // minute     's+': value.getSeconds(), // second     'q+': Math.floor((value.getMonth() + 3) / 3), // quarter     'S': value.getMilliseconds() // millisecond    }    if (!format || format === '') {     format = 'yyyy-MM-dd hh:mm:ss'    }    if (/(y+)/.test(format)) {     format = format.replace(RegExp.$1, (value.getFullYear() + '').substr(4 - RegExp.$1.length))    }    for (let k in o) {     if (new RegExp('(' + k + ')').test(format)) {      format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))     }    }    return format   },   show() {    if (!this.readonly) {     this.isShowPicker = true    }   },   confirm(value) {    // 更新 v-model 綁定的 value 值，第二個(gè)參數(shù)是毫秒數(shù)，第三個(gè)參數(shù)是原始值，根據(jù)自己的項(xiàng)目的數(shù)據(jù)結(jié)構(gòu)來(lái)修改    // input 事件同時(shí)也會(huì)觸發(fā) vee-validate 的驗(yàn)證事件    this.$emit('input', value.getTime(), value)    // onChange事件，雖然重寫 @input可以實(shí)現(xiàn)，但這樣會(huì)破壞 v-model 寫法。    this.$emit('change', value.getTime(), value)    this.cancel()   },   // 隱藏彈框   cancel() {    this.isShowPicker = false   }  } }</script>