Ivew-Design

简介

官网：https://www.iviewui.com/

组件

DatePicker

 <DatePicker
   v-model="hopeExpectedPickup"
   type="datetime"
   format="yyyy/MM/dd HH:mm"
   :placeholder="$t('lssong.orderSubmit.hopeExpireTimeSelect')"
   :time-picker-options="{
     steps: [1, 15, 10],
     disabledHours
   }"
   :options="optionsPicker"
   style="font-size: 12px; height: 20px; width: 240px"
   @on-change="datePickerChange"
 />

export default {
  data() {
    return {
      hopeExpectedTimeOld: null, // 期望收货时间
      hopeExpectedPickupOld: null, // 期望取货时间
      optionsPicker: {
        disabledDate (date) {
          if (Date.now() - date.getTime() < 60 * 1000) {
            return false
          }
          return date.getTime() < Date.now() - 3600 * 1000 * 24
          // return date && date.valueOf() < Date.now() - 86400000
        }
      },
      disabledHours: [],
    }
  },
  methods: {
    datePickerChange () {
      console.log('hhh', this.hopeExpectedPickup)
      this.disabledHours = []
      // console.log('dateChange')
      const hopeTime = new Date(this.hopeExpectedPickup)
      const hopeTimeOld = new Date(this.hopeExpectedPickupOld)
      const nowTime = new Date()
      const startAt = hopeTime * 1000 / 1000
      console.log(startAt, hopeTime.getDate(), nowTime.getDate())
      // if (hopeTime.getDate() === nowTime.getDate()) {
      const hours = nowTime.getHours()
      if (hours < 24 && hours > 0) {
        const arr = []
        for (let i = hours; i > 0; i--) {
          arr.push(i)
        }
        this.disabledHours = arr
      }
      // }
      if (startAt < Date.now()) {
        const d = new Date(Date.now() + 3600 * 1000)
        d.setMinutes(0)
        this.hopeExpectedPickup = d
      } else {
        // const date = new Date(this.hopeExpectedPickup)
        // date.setHours((new Date()).getHours() + 1)
        // date.setMinutes(0)
        // this.hopeExpectedPickup = date
        // eslint-disable-next-line
        if (hopeTimeOld.getYear() === hopeTime.getYear() && hopeTime.getMonth() === hopeTimeOld.getMonth() && hopeTime.getDate() === hopeTimeOld.getDate()) {
        } else {
          const date = new Date(this.hopeExpectedPickup)
          date.setHours((new Date()).getHours() + 1)
          date.setMinutes(0)
          this.hopeExpectedPickup = date
        }
      }
    }
  }

DatePicker props

#

options

#
选择器额外配置

DatePicker events

#

DatePicker slot

#