工夫日期抉择器官网地址
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; } },},