elementUI日期限制

程序媛之博客

已于 2023-01-17 15:43:02 修改

阅读量516

点赞数 1

分类专栏：前端文章标签： javascript elementui vue.js

于 2023-01-13 14:12:17 首次发布

本文链接：https://blog.csdn.net/qq_42080594/article/details/128673529

版权

前端专栏收录该内容

37 篇文章 3 订阅

订阅专栏

当选中一个日期之后，只能选择当前选中的这个日期的前一天或者后一天，其他都不可以选。

outTime: [], // 校验日期必选

choiceDate0: null,

pickerOptions: {
        // // 设置不能选择的日期
        // disabledDate: (time) => {
        //   // 限制能选择的日期只能在当前日之前，并且当选择的天数大于30天的要提示用户导出
        //   return time.getTime() > Date.now()
        // },
        // 2022-5-6,设置选择的时间不能超过一天
        onPick: ({ maxDate, minDate }) => {
          // 这个方法是为了可以监听到当前选择的第一个日期
          // console.log(minDate, maxDate)
          this.choiceDate0 = minDate.getTime();
          if (maxDate) {
            this.choiceDate0 = '';
          }
        },
        disabledDate: (time) => {
          let choiceDateTime = new Date(this.choiceDate0).getTime()
          let preDate = new Date(choiceDateTime - 1*24*60*60*1000); // 前一天
          let nextDate = new Date(choiceDateTime + 1*24*60*60*1000); // 后一天
          if (this.choiceDate0) {
            // 2022.9.8去掉未来不可选的限制，改为只能选择选中日期的前一天或后一天
            // let check0Date = this.formaterDate(choiceDateTime, 'date')
            // console.log(check0Date, this.isToday(check0Date))
            // if (this.isToday(check0Date)) {
            //   // 当前选中的日期在今天，那么后一天不可以选
            //   return time.getTime() < new Date(preDate).getTime() || time.getTime() > Date.now()
            // } else {
              // 当前"选中日期"的"昨天以前的时间"不可以选择，"明天以后的时间"不可以选择
              return time.getTime() < new Date(preDate).getTime() || time.getTime() > new Date(nextDate).getTime()
            // }
          }
          // else {
          //   return time.getTime() > Date.now()
          // }
        },
        shortcuts: [
          {
            text: '最近一天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 6)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },

// 默认查当前时间以前的24小时时间
      this.outTime = [this.formatDate(Date.parse(new Date()) - 24 * 60 * 60 * 1000), this.formatDate(Date.parse(new Date()))]
      this.dateChange(this.outTime)


    // 日期校验
    checkDate(rule, value, callback) {
      if (!this.queryParams.startTime && !this.queryParams.endTime) {
        return callback(new Error('请选择时间范围'))
      } else {
        let a1 = Date.parse(new Date(this.queryParams.endTime))
        let a2 = Date.parse(new Date(this.queryParams.startTime))
        let day = parseFloat((a1 - a2) / (1000 * 60 * 60 * 24))
        if (day > 1) {
          return callback(new Error('只支持查询1天的数据'))
        } else {
          return callback()
        }
      }
    }

日期选择限制：限制能选择的日期只能在当前日之前

pickerOptions: {

// 设置不能选择的日期

disabledDate: (time) => {

// 限制能选择的日期只能在当前日之前，并且当选择的天数大于30天的要提示用户导出

return time.getTime() > new Date(this.todayDate).getTime()

shortcuts: [

{

text: '最近一个月',

onClick(picker) {

const end = new Date()

const start = new Date()