zoukankan      html  css  js  c++  java
  • antdv时间选择a-date-picker设置日期可选范围(近一周、近半月、近一月等)

    Vue->Template:

    <a-date-picker
      v-model="value"
      :disabled-date="disabledDate"
    />

    Vue->Methods:

    // 设置不可选择的日期
    disabledDate (current) {
      this.value = undefined
      switch (this.data.dateRange) {
        // 近一周
        case 'nearWeek':
          {
            // 计算今天是这周第几天 周日为一周中的第一天
            const weekOfday = parseInt(this.moment().format('d'))
            // 获取当前周的开始结束时间
            const weekStart = this.moment().subtract(weekOfday - 1, 'days')
            const weekEnd = this.moment().add(7 - weekOfday, 'days')
            // 设置区间之外的日期不可选
            return current < weekStart.subtract(1, 'days') || current > weekEnd
          }
        // 近半月
        case 'nearHalfMonth':
          {
            // 获取本月开始结束时间
            const monthStart = this.moment().startOf('month')
            const monthEnd = this.moment().endOf('month')
            // 区间开始结束
            let start, end
            // 计算今天是这月第几天
            const monthOfday = parseInt(this.moment().format('D'))
            // 判断是否处于前半月还是后半月
            if (monthOfday < 15) {
              // 前半月区间:1 ~ 15
              start = monthStart
              end = this.moment(start).add('days', 14)
            } else {
              // 后半月区间:16 ~ 月末最后一天
              start = this.moment(this.moment().format('YYYY-MM') + '-16')
              end = monthEnd
            }
            // 设置区间之外的日期不可选
            return current < start || current > end.add('days', 1)
          }
        // 近一月
        case 'nearMonth':
          {
            // 获取本月开始结束时间
            const monthStart = this.moment().startOf('month')
            const monthEnd = this.moment().endOf('month')
            // 设置区间之外的日期不可选
            return current < monthStart || current > monthEnd.add('days', 1)
          }
        // 近半年
        case 'nearHalfYear':
          {
            // 获取今年开始结束时间
            const yearStart = this.moment().startOf('year')
            const yearEnd = this.moment().endOf('year')
            // 区间开始结束
            let start, end
            // 获取今年天数
            const yearDays = this.moment(yearEnd).diff(yearStart, 'days')
            // 计算今天是今年第几天
            const yearOfday = parseInt(this.moment().format('DDD'))
            // 判断是否处于前半年还是后半年
            if (yearOfday < (yearDays / 2)) {
              // 前半年区间:今年开始时间 ~ 第二季度结束
              start = yearStart
              // 今年开始时间+2个季度-1天,即上半年结束时间(第二季度结束)
              end = this.moment(yearStart).add('Q', 2).subtract(1, 'days')
            } else {
              // 后半年区间:第三季度开始 ~ 年末最后一天
              // 今年开始时间+2个季度,即下半年开始时间
              start = this.moment(yearStart).add('Q', 2)
              end = yearEnd
            }
            // 设置区间之外的日期不可选
            return current < start || current > end
          }
        // 近一年
        case 'nearYear':
          {
            // 获取今年开始结束时间
            const yearStart = this.moment().startOf('year')
            const yearEnd = this.moment().endOf('year')
            // 设置区间之外的日期不可选
            return current < yearStart || current > yearEnd
          }
      }
      return false
    }
    嘴角上扬,记得微笑
  • 相关阅读:
    data structure,(ADT)
    正交和投影的理解
    高阶函数(包含偏函数)简要介绍
    名字与对象之间的建立引用与解除引用,Python中不可修改对象等,换行加文档字符串,
    迭代器
    CrashCourse 笔记
    列表生成式的进化版——生成器以及iterator
    高代小笔记——关于共轭,欧式空间,双线性函数
    高等代数的笔记杂记——Jordan标准形,Jordan块
    Centos6版本搭建Cobbler,实现自动化部署多版本系统
  • 原文地址:https://www.cnblogs.com/jardeng/p/13565848.html
Copyright © 2011-2022 走看看