element日期时间选择器限制时间选择(精确到小时)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
需求:选一个开始时间,要求精确到小时,小于当前时刻的小时不让选择,只能往后选7天。
如图:
需要element的DateTimePicker 日期时间选择器
部分代码如下:
<el-form-item
label="出发时间:"
prop="startTime">
<el-date-picker
v-model="editForm.startTime"
:picker-options="pickerOptions"// 控制时间选择
format="yyyy-MM-dd HH:mm"
type="datetime"
placeholder="选择日期时间"
/>
</el-form-item>
pickerOptions: {
disabledDate(time) {
let dateTime = new Date();
let startDateTime = dateTime.setDate(dateTime.getDate() - 1);
let endDateTime = dateTime.setDate(dateTime.getDate() + 7);
return (
time.getTime() < new Date(startDateTime).getTime() ||
time.getTime() > new Date(endDateTime).getTime()
);
},
selectableRange:
new Date(new Date().setHours(new Date().getHours() + 1)).format(
'hh'
) + ':00:00 - 23:59:00'
},
selectableRange:可选时间段
startDateTime 时间戳
new Date(startDateTime) 标准时间
new Date(startDateTime).getTime() 时间戳
还需要watch监听和computed,如果不监听,那么每一天的当前小时都会被禁用
computed: {
startTime() {
return this.editForm.startTime;
}
},
watch: {
startTime: function(newVal, oldVal) {
let selectDate = newVal.format('yyyyMMdd');
let oldDate = oldVal.format('yyyyMMdd');
let nowDate = new Date().format('yyyyMMdd');
// 如果两次选择的时间不相等
if (oldDate !== selectDate) {
// 如果这次选择的时间等于今天的时间就不让选当前小时之前,否则就可以选全部时间段
if (selectDate === nowDate) {
this.pickerOptions.selectableRange =
new Date(new Date().setHours(new Date().getHours() + 1)).format(
'hh'
) + ':00:00 - 23:59:00';
} else {
this.pickerOptions.selectableRange = '00:00:00 - 23:59:00';
}
let realNewVal = new Date(
newVal.format('yyyy-MM-dd') + oldVal.format(' hh:mm:ss')
);
// 如果这个时间比当前时间小,就等于当前时间,否则等于这个参数的时间
if (realNewVal.getTime() < new Date().getTime()) {
this.editForm.startTime = new Date();
} else {
this.editForm.startTime = realNewVal;
}
}
}
},
重写了format方法,代码如下:格式化时间也可以用库,比如moment
/**
* 格式化日期
*/
export const dateFormat = function() {
/* eslint-disable no-extend-native */
Date.prototype.format = function(fmt) {
let o = {
'M+': this.getMonth() + 1, // 月份
'd+': this.getDate(), // 日
'h+': this.getHours(), // 小时
'm+': this.getMinutes(), // 分
's+': this.getSeconds(), // 秒
'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
S: this.getMilliseconds() // 毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
(this.getFullYear() + '').substr(4 - RegExp.$1.length)
);
}
for (let k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1
? o[k]
: ('00' + o[k]).substr(('' + o[k]).length)
);
}
}
return fmt;
};
};
注意:Date 对象(Date 对象用于处理日期与时间)
new Date() 中国标准时间




A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:8 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
更多推荐
所有评论(0)