el-date-picker结合dayjs快捷设置本周、上周、本月、上月

 需求:只能选择今天之后的提起(不包括今天),点击本周、本月的时候不包括当天,也就是今天,默认展示前7天,接口需要的格式为时间戳。(使用moment.js、day.js这样的事件处理插件效率要比getTime高,省去很多数据处理)

html:

  <el-date-picker
          @change="handleDateChange"
          v-model="form.date"
          type="daterange"
          class="date"
          range-separator="至"
          value-format="timestamp"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        />

data:

form: {date: [
          dayjs().subtract(7, 'day').valueOf(),
          dayjs().subtract(1, 'day').valueOf()
        ]},   
pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7
        },
        shortcuts: [
          {
            text: '本周',
            onClick: (picker) => {
              const start = dayjs().startOf('week').add(1, 'day').valueOf()
              const end = dayjs().subtract(1, 'day').valueOf()
              var now = new Date().getDay() // 判断今天星期几,周日-0,周一-1
              // 周一无数据,只能选择今天及之后的日期
              if (now === 1) {
                this.$message.warning('当前时间区间暂无数据,请选择其他时间')
                picker.$emit('pick', '')
                return
              }
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '上周',
            onClick(picker) {
              const start = dayjs()
                .add(-1, 'week')
                .startOf('week')
                .add(1, 'day')
                .valueOf()
              const end = dayjs()
                .add(-1, 'week')
                .endOf('week')
                .add(1, 'day')
                .valueOf()
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '本月',
            onClick: (picker) => {
              const start = dayjs().startOf('month').valueOf()
              const end = dayjs().subtract(1, 'day').valueOf()
              var now = dayjs().format('DD') // 判断今天几号
              // 1号无数据,只能选择今天及之后的日期
              if (now === '01') {
                this.$message.warning('当前时间区间暂无数据,请选择其他时间')
                picker.$emit('pick', ['', ''])
                return
              }
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '上月',
            onClick(picker) {
              const start = dayjs().add(-1, 'month').startOf('month').valueOf()
              const end = dayjs().add(-1, 'month').endOf('month').valueOf()
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }

数据格式,请求接口的时候处理:

const params = {
        start_time: parseInt((this.date[0] || 0) / 1000),
        end_time: parseInt((this.date[1] || 0) / 1000)
      }

猜你喜欢

转载自blog.csdn.net/qq_33168578/article/details/123830153