vue elemen-ui时间组件记录汇总

1.vue2时间组件el-date-picker

:picker-options="pickerOptionsWeek"

往前禁用时间与定死时间区间设定都在pickerOptions该方法里的disabledDate写

例如：

     pickerOptionsWeek: {
        firstDayOfWeek: 2,  //设定周首为周几，默认周日，2为周二
        disabledDate: time => {
          const space = 300 * 24 * 3600 * 1000  //设置只能选到前300天
          const maxTime = new Date().getTime()
          const minTime = maxTime - space
          return time.getTime() > maxTime || time.getTime() < minTime
        }
      },

2.vue3时间组件el-date-picker

这个和vue2思路差不多的，只是disabledDate这个方法被拎出来了不在pickerOptions里了

例如：

    disabledDate: (time: any) => {
        const space = 20 * 24 * 3600 * 1000  //时间区间为20天
        const disabled = startTime.value
          ? time.getTime() < startTime.value - space || time.getTime() > startTime.value + space
          : false  //这个分为有开始时间和没有的情况
        return time.getTime() > Date.now() || disabled
      },
      calendarChange: (val: [Date, Date]) => {    //这个是我拿不到开始时间时用这个方法暂存了下(拿另一个change方法不行，这个可以)
        startTime.value = val[0].getTime()   //暂存开始时间
      }

ps: 记录一些dayjs好用的时间方法

//拿月头月尾

const startDate = dayjs(sourceMonth).startOf('month').format('YYYY-MM-DD')

const endDate = dayjs(sourceMonth).endOf('month').format('YYYY-MM-DD')

//拿周头周尾

const startDate = dayjs(sourceWeek).startOf('week').add(1, 'day').format('YYYY-MM-DD')

const endDate = dayjs(sourceWeek).endOf('week').add(1, 'day').format('YYYY-MM-DD')

//判断时间格式

if (!dayjs(dayTime).isValid()) return

const year = new Date().getFullYear();// 获得今年

const week = dayjs(dayTime).day() || 7;// 获得今天是星期几*