ebiz-h5/src/components/ebiz/FieldDatePicter.vue

<template>
  <div class="date-picter mb1" id="date-picter">
    <van-field
      readonly
      clickable
      :label="label"
      :value="date"
      :placeholder="placeholder"
      @click="DatePickerShow(flag)"
      :required="required"
      :name="label"
      right-icon="arrow"
    />
    <van-popup v-model="showDataPicker" position="bottom">
      <van-datetime-picker :type="type" v-model="data" @confirm="onConfirmDate" @cancel="cancel" :max-date="maxDate" :min-date="minDate" />
    </van-popup>
  </div>
</template>
<script>
import { Field, Popup, DatetimePicker } from 'vant'
import utils from '../../assets/js/business-common'
import beforeDate from '../../assets/js/utils/getBeforeDate.js'
export default {
  name: 'FieldDatePicter',
  props: {
    maxDate: {
      type: Date,
      default: () => {
        return new Date('2040-12-31')
      }
    },
    minDate: {
      type: Date,
      default: () => {
        return new Date('1900-01-01')
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: '11'
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    type: {
      type: String,
      default: 'date'
    },
    defaultDate: {
      type: Date,
      default: () => {
        return new Date()
      }
    },
    defaulTime: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    },
    flag: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentDate: beforeDate.getBeforeYear(30), //当前时间的30年前
      showDataPicker: false,
      data: '', //时间插件绑定的值
      date: '' //field显示的值
      //minDate: new Date('1900-01-01') //因为VANT组件默认是十年前
    }
  },
  components: {
    [DatetimePicker.name]: DatetimePicker,
    [Field.name]: Field,
    [Popup.name]: Popup
  },
  created() {
    // this.DatePickerShow(this.flag)
    this.init()
    // setTimeout(() => {
    //   this.showDataPicker = false
    // }, 0)
  },
  mounted() {},
  watch: {
    value() {
      this.init()
    }
  },
  methods: {
    /**
     * 初始化
     */

    init() {
      if (this.type == 'time') {
        this.data = this.value
      } else if (this.value) {
        this.data = new Date(this.value)
      } else {
        this.data = this.currentDate
      }
      if (this.required) {
        this.rules = 'required'
      }
      this.date = this.value
    },

    onConfirmDate(value) {
      let result = ''
      if (this.type == 'time') {
        result = value
      } else {
        let dateType = {
          date: 'yyyy-MM-dd',
          datetime: 'yyyy-MM-dd HH:mm:ss',
          'year-month': 'yyyy-MM',
          time: 'mm:ss'
        }
        result = utils.formatDate(value, dateType[this.type])
      }

      this.$emit('update:value', result)
      this.date = result
      this.$emit('confirm', result)
      this.showDataPicker = false
    },
    cancel() {
      this.showDataPicker = false
      this.$emit('cancel', '')
    },
    DatePickerShow(flag) {
      if (this.readonly || this.disabled) {
        return
      }
      this.showDataPicker = flag
      this.$emit('showUp', flag)
    }
  }
}
</script>
<style lang="scss" scoped>
.date-picter:not(:last-child)::after {
  position: absolute;
  // z-index: 99;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 0;
  // bottom: 0;
  // top: 0;
  left: 4.26667vw;
  border-bottom: 1px solid #dadada;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

#date-picter {
  /deep/.van-cell:not(:last-child)::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 4.26667vw;
    border-bottom: 1px solid transparent;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
.nav-bar {
  .van-nav-bar {
    &__text {
      color: white;
    }
    &__title {
      color: white;
    }
  }
  .van-icon {
    color: white;
  }
}
</style>