需求1如下：当前时间+180天不可选择，180天之后可以选择，之前的时间都禁止选择
页面代码如下：
<el-date-picker
v-model="temp.expire_time"
:picker-options="pickerOption"
type="datetime"
placeholder="选择日期时间"
format="yyyy-MM-dd HH:mm:ss "
value-format="yyyy-MM-dd HH:mm:ss"
/>
pickerOption: {
// 限制只能选择180天以后的时间
disabledDate: (time) => {
return (time.getTime() < Date.now() + 8.64e7 * 180)
}
},
需求2如下：默认选择当前时间的180天的时间，所有时间都可以选择
页面代码同需求1一样，不同的是处理默认选择的时间
methods: {
// 获取当前时间的180天后的时间值
getThreeTime() {
var data = new Date()
var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * 180)
var y = Da.getFullYear()
var m = Da.getMonth() + 1
var d = Da.getDate()
var H = Da.getHours()
var mm = Da.getMinutes()
var ss = Da.getSeconds()
m = m < 10 ? '0' + m : m
d = d < 10 ? '0' + d : d
H = H < 10 ? '0' + H : H
return y + '-' + m + '-' + d + ' ' + H + ':' + mm + ':' + ss
},
}
// 授权有效期默认值是180天
编辑的函数中处理如下
if (row.expire_time === null) {
// 授权有效期默认值选择是180天之后的
this.$set(this.temp, 'expire_time', this.getThreeTime());
} else {
this.$set(this.temp, 'expire_time', row.expire_time);
}
以上就是关于年月日时分秒的时间组件的两种需求处理,今天就分享到这里啦！