element DatePicker 时间选择控件设置

element DatePicker 日期选择器实现只能选择当前时间及以后的时间,这个需求经常遇到,做下笔记以便用到的时候查看,方便快捷。


DatePicker默认选中当前时间

utils里面封装一个公共的方法,用来获取当前时间

export function getNowTime() {
  var date=new Date();  
  var year=date.getFullYear(); //获取当前年份  
  var mon=date.getMonth()+1; //获取当前月份  
  var da=date.getDate(); //获取当前日  
  var day=date.getDay(); //获取当前星期几  
  var h=date.getHours(); //获取小时  
  var m=date.getMinutes(); //获取分钟  
  var s=date.getSeconds(); //获取秒
  return year+'-'+mon+'-'+da+ ' '+h+':'+m
}

组件中引入 getNowTime 公共方法

import  { getNowTime } from '@/utils/index'  // 引入
this.$set(this.formData, "turn_time", getNowTime()); //赋值

DatePicker实现只能选择当前时间以后的时间

:picker-options="pickerOption" 当前时间日期选择器特有的选项
disabledDate 设置禁用状态,参数为当前日期,要求返回 Boolean

data() {
  return {
     pickerOption: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的 
        }
     }
  }
}

DatePicker选中当前日期之前的

:picker-options="pickerOptions"
pickerOptions: {
   disabledDate(time) {
        return time.getTime() > Date.now() - 8.64e6
    }
}

你可能感兴趣的:(element DatePicker 时间选择控件设置)