element-時間選擇器--常用時間規則

1、結束時間大於開始時間

pickerOptions0: {
        disabledDate: time => {
          if (this.queryForm.operateEndTime !== null) {
            return (
              new Date(this.queryForm.operateEndTime).getTime() < time.getTime()
            )
          }
        }
      },
pickerOptions1: {
        disabledDate: time => {
          if (this.queryForm.operateStartTime !== null) {
            return (
              new Date(this.queryForm.operateStartTime).getTime() > time.getTime()
            )
          }
        }
      }

 2、結束時間大於或等於開始時間

 pickerOptions0: {
        disabledDate: time => {
          if (this.queryForm.operateEndTime) {
            return time.getTime() > new Date(this.queryForm.operateEndTime).getTime()
          }
        }
      },
  pickerOptions1: {
        disabledDate: time => {
          if (this.queryForm.operateStartTime) {
            return (
              time.getTime() <
              new Date(this.queryForm.operateStartTime).getTime() - 86400000
            )
          }
        }
      },

3、開始時間及結束時間大於等於今天且結束時間大於或等於開始時間

    pickerOptions0: {
        //結束時間不能大於開始時間
        disabledDate: time => {
          if (this.form.activityEnd) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > new Date(this.form.activityEnd).getTime()
            )
          } else {
            //還沒有選擇結束時間的時候，讓他只能選擇今天之后的時間包括今天
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      },
    pickerOptions1: {
        disabledDate: time => {
          if (this.form.activityBegin) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() <
                new Date(this.form.activityBegin).getTime() -
                  1 * 24 * 60 * 60 * 1000
            ) //可以選擇同一天
          } else {
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      },

4、快捷時間選擇（當日、一周內、一月內、全部）

 main.js中引入moment時間組件

import moment from 'moment'
Vue.prototype.$moment = moment

 

      pickerOptions: {
        shortcuts: [{
          text: '當日',
          onClick: picker => {
            picker.$emit('pick', [new Date(), new Date()])
          }
        }, {
          text: '一周內',
          onClick: picker => {
            const start = this.$moment(this.$moment().week(this.$moment().week()).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD')
            const end = this.$moment(this.$moment().week(this.$moment().week()).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD')
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '一月內',
          onClick: picker => {
            const start = this.$moment(this.$moment().month(this.$moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD')
            const end = this.$moment(this.$moment().month(this.$moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD')
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '全部',
          onClick: picker => {
            picker.$emit('pick', ['', ''])
          }
        }]
      },