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
}
}