共计 2160 个字符，预计需要花费 6 分钟才能阅读完成。
工夫日期抉择器官网地址
into_user_storage_time: '2022-01-12 20:05:04', // 原始工夫值new_into_user_storage_time: '工夫日期选择器抉择工夫', // 新日期工夫绑定值要求以后工夫 > 新的工夫日期 > 原始工夫值用到插件"moment": "2.24.0"// 工夫插件（也能够不必，本人转换工夫格局，就是麻烦些）
留神点：
picker-options的disabledDate只能设置日期的范畴
设置工夫范畴须要用到selectableRange
HTML
<el-date-picker
v-model="field.new_into_user_storage_time"
type="datetime"
placeholder="抉择日期工夫"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
</el-date-picker>js
data() {
return {pickerOptions: {}, //
field:{
into_user_storage_time: '', // 原始工夫值
new_into_user_storage_time: '', // 新日期工夫绑定值
}
};
},
watch: { // 深度监听 field
field: { // 设置工夫范畴
handler: function(val) {
let time = val.new_into_user_storage_time; // 获取 - 新工夫 - 的值
if (time) {let oldTime = this.handleData.data.into_user_storage_time.split(' '); // 解决原始工夫值
let newTime = time.split(' '); // 解决新工夫值
let moment = this.$moment()
.format('YYYY-MM-DD HH:mm:ss')
.split(' '); // 解决以后工夫值
let selectableRange = oldTime[1] + '- 23:59:59'; // 设置默认可选时间段
if (newTime[0] != oldTime[0]) { // 如果新工夫（以后抉择工夫）与原始工夫不是一天，则终日的工夫都可选
selectableRange = '00:00:00 - 23:59:59';
}
if (moment[0] == newTime[0]) { // 如果新工夫（以后抉择工夫）与以后工夫是一天，则可选工夫为 0 点到当初的工夫
selectableRange = '00:00:00 -' + moment[1];
}
this.$set( // set 设置 pickerOptions，用于从新渲染页面
this.pickerOptions,
'selectableRange',
selectableRange
);
}
},
deep: true
}
},
methods:{getPickerOptions() { // 只能设置日期的范畴
let timeArr = this.handleData.data.into_user_storage_time.split(' '); // 解决接管到的数据 原始工夫值 into_user_storage_time
let beforeTime = new Date(timeArr[0]).getTime(); // 获取原始工夫值 - 日期 - 的工夫戳
let moment = this.$moment().format('YYYY-MM-DD'); // 获取以后 - 日期 - 的值
moment = new Date(moment).getTime(); // 获取以后 - 日期 - 值的工夫戳
let disabledDate = time => { // picker-options 的参数（设置的是日期的范畴）// 禁用日期 time - 日期的值
let times = time.getTime() + 8 * 60 * 60 * 1000; // 默认 new Date 进去的工夫是 08:00, 而 moment 插件时 00:00, 所以做了下解决
return times < beforeTime || times > moment; // 不符合要求的工夫都禁用掉
};
this.pickerOptions = {disabledDate}; // 最初赋值
},
handleDefaultTime() { // 设置工夫日期选择器默认值，默认以后工夫
let moment = this.$moment().format('YYYY-MM-DD HH:mm:ss'); // 获取以后工夫
let oldTime = this.$moment(this.handleData.data.into_user_storage_time).format('YYYY-MM-DD HH:mm:ss'); // 转换原始工夫值格局
if (new Date(oldTime).getTime() > new Date(moment).getTime()) { // 加了容错，如果原始工夫大于以后工夫，默认为初始工夫，否则为以后工夫
this.field.new_into_user_storage_time = oldTime;
} else {this.field.new_into_user_storage_time = moment;}
},
},
正文完
