<vant-field-date label="發布時間" 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">   <!-- 顯示當前值，沒有值顯示提示文字 -->   {{ text ? text : placeholder }}   <!-- 自定義錯誤顯示 -->   <div    v-if="$attrs.error"    v-text="$attrs['error-message']"    class="van-field__error-message"   />  </van-cell>  <!-- 用 actionsheet 來包裹彈出層日期控件 -->  <van-actionsheet v-model="isShowPicker">   <!-- $attrs 可以把根節點的attr放到目標組件上，如此可以像使用 DatePicker 組件一樣使用這個新組件 -->   <van-datetime-picker    v-bind="$attrs"    :type="type"    title="請選擇日期"    :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會報錯   },   // Cell 顯示的文字   label: {    type: String,    default: null   },   // 必填的星號   required: {    type: Boolean,    default: false   },   // 只讀狀態   readonly: {    type: Boolean,    default: false   },   // 占位提示文字   placeholder: {    type: String,    default: '請選擇'   },   // 展示的格式化   format: {    type: String,    default: null   }  },  data() {   return {    selectedItem: null,    isShowPicker: false   }  },  computed: {   // 展示的格式化，時間提交的值是Date類型數據   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 值，第二個參數是毫秒數，第三個參數是原始值，根據自己的項目的數據結構來修改    // input 事件同時也會觸發 vee-validate 的驗證事件    this.$emit('input', value.getTime(), value)    // onChange事件，雖然重寫 @input可以實現，但這樣會破壞 v-model 寫法。    this.$emit('change', value.getTime(), value)    this.cancel()   },   // 隱藏彈框   cancel() {    this.isShowPicker = false   }  } }</script>