我要评论需求：选一个开始时间，要求精确到小时，小于当前时刻的小时不让选择，只能往后选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（） 中国标准时间
到此这篇关于element日期时间选择器限制时间选择功能实现(精确到小时)的文章就介绍到这了,更多相关element日期时间选择器内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论