iview datePicker日期选择器限制可选时间

日期选择器组件在日常开发中使用频率极高，有时候会有一些需求限制可选择的时间，下面就简单记录一下经常会遇到的一些情况，以iview组件为例，其他组件库大同小异

1. 如下options1和options3是日期组件给的demo，限制的可选日期是今天及之后的日期，对其稍作修改的options2则是限制选择今天及之前的日期，其中86400000大家应该都知道其实就是1000 * 60 * 60 * 24及一天的时间戳,这也是日常用的最多情况。options3则是限制了某一天不可选，不多赘述了。

options1: { 
    disabledDate (date) { 
        return date && date.valueOf() < Date.now()-86400000    
    }
}, 
options2: { 
    disabledDate (date) { 
        return date && date.valueOf() > Date.now()
    } 
},
options3: { 
    disabledDate (date) { 
        const disabledDay = date.getDate(); 
        return disabledDay === 15; 
    } 
}

2.除此之外，常见的还有限制时间范围可选

限制选择当前日期及往前一个月的日期
options: {
    disabledDate(date) {
        let curDate = (new Date()).getTime()
        let three = 30 * 24 * 60 * 60 * 1000;
        let months = curDate - three;
        return date.getTime() > Date.now() || date.getTime() < months;
    }
}

两个输入框的情况下，一个开始时间，一个结束时间，限制开始时间不能大于结束时间，其中dateFormat方法为常用的日期格式化方法，在这里不做过多描述
 <DatePicker
   type="date"
   v-model="table.params.dateStart"
   placeholder="请选择日期"
   @on-change="val=>table.params.dateStart=val"
   :options="beginDate"
 ></DatePicker>
 <DatePicker
  type="date"
  v-model="table.params.dateEnd"
  placeholder="请选择日期"
  @on-change="val=>table.params.dateEnd=val"
  :options="endDate"
 ></DatePicker>
  
watch: {
'table.params.dateStart': {
      handler (newValue, oldValue) {
        if (!newValue) {
          this.endDate = {}
        } else {
          this.endDate = {
            disabledDate (date) {
              return date && dateFormat('YYYY-MM-DD', date) < newValue
            }
          }
        }
      },
      deep: true,
    },
    'table.params.dateEnd': {
      handler (newValue, oldValue) {
        if (!newValue) {
          this.beginDate = {}
        } else {
          this.beginDate = {
            disabledDate (date) {
              return date && dateFormat('YYYY-MM-DD', date) > newValue
            }
          }
        }
      },
      deep: true,
    },   
}

3.简单记录其他使用情况

限制选择本周

options:{
    disabledDate (date) {
        let today = new Date()
        return date.valueOf() > new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7 - today.getDay()) || date.valueOf() > new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7 - today.getDay())
    }       
}

在其中能看到getTime(),Date.now()等方法，是用来获取时间戳的###

1.获得当前的时间戳  Date.now()

2.Date.parse()将字符串或者时间对象直接转化成时间戳，不推荐使用这种办法，没有精确到毫秒，会将毫秒级别的数值被转化为000

3.通过valueOf()函数返回指定对象的原始值获得准确的时间戳值
new Date().valueOf()

4.通过原型方法直接获得当前时间的毫秒值
new Date().getTime()

5.将时间对象转化为一个number类型的数值，即时间戳
Number(new Date())