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; } } } },

注意：Date 对象（Date 对象用于处理日期与时间）
new Date（） 中国标准时间
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020052814371415.png