element的日期范围选择器快捷选择今日,昨日,本周,上周,本月,上个月,禁止选择当前日期之后的日期

element的日期范围选择器快捷选择今日,昨日,本周,上周,本月,上个月,禁止选择当前日期之后的日期

                <template>
                  <div class="card-data">
                    <el-date-picker
                      v-model="orderValue"
                      type="daterange"
                      align="center"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      format="yyyy 年 MM 月 dd 日 "
                      value-format="yyyy-MM-dd"
                      :picker-options="pickerOptions">
                    </el-date-picker>
                </template>
      pickerOptions: {
        shortcuts: [{
          text: '今日',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '昨日',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
            end.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '本周',
          onClick (picker) {
            const start = new Date()
            const end = new Date()
            const nows = start.getDay() || 7 // 注意周日算第一天,如果周日查询本周的话,天数是0,所有如     果是0,默认设置为7
            start.setTime(start.getTime() - 3600 * 1000 * 24 * ((nows - 1)))
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '上周',
          onClick (picker) {
            const dataValue = new Date()
            const year = dataValue.getFullYear()
            const month = dataValue.getMonth() + 1
            const day = dataValue.getDate()
            var thisWeekStart // 本周周一的时间
            if (dataValue.getDay() === 0) {
              // 周天的情况;
              thisWeekStart =
                  new Date(year + '/' + month + '/' + day).getTime() -
                  (dataValue.getDay() + 6) * 86400000
            } else {
              thisWeekStart =
                  new Date(year + '/' + month + '/' + day).getTime() -
                  (dataValue.getDay() - 1) * 86400000
            }
            const prevWeekStart = thisWeekStart - 7 * 86400000 // 上周周一的时间
            const prevWeekEnd = thisWeekStart - 1 * 86400000 // 上周周日的时间
            const start = new Date(prevWeekStart) // 开始时间
            const end = new Date(prevWeekEnd) // 结束时间
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '本月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setDate(1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '上月',
          onClick (picker) {
            const end = gettimeEnd()
            const start = gettimeStart()
            picker.$emit('pick', [start, end])
            function gettimeStart () {
              const nowdays = new Date()
              let year = nowdays.getFullYear()
              let month = nowdays.getMonth()
              if (month === 0) {
                month = 12
                year = year - 1
              }
              if (month < 10) {
                month = '0' + month
              }
              let firstDayOfPreMonth = year + '-' + month + '-' + '01'
              firstDayOfPreMonth = firstDayOfPreMonth.toString()
              return new Date(firstDayOfPreMonth)
            }
            function gettimeEnd () {
              const nowdays = new Date()
              let year = nowdays.getFullYear()
              let month = nowdays.getMonth()
              if (month === 0) {
                month = 12
                year = year - 1
              }
              if (month < 10) {
                month = '0' + month
              }
              const lastDay = new Date(year, month, 0)
              let lastDayOfPreMonth = year + '-' + month + '-' + lastDay.getDate()
              lastDayOfPreMonth = lastDayOfPreMonth.toString()
              return new Date(lastDayOfPreMonth)
            }
          }
        }],
        disabledDate: (time) => { // 禁止选择当前日期之后的日期
          return time.getTime() > Date.now() - 24 * 60 * 60 * 1000
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值