聊城企业网站建设,个人网站转企业网站,做网站买狗怎么样,建设工程教育网怎么样限制只能选择当前时间前/后的时间#xff08;包含日期、时、分#xff09;
首先需要给添加一个属性picker-options属性,然后在data中定义这个pickerOptions属性。
el-date-pickerv-modelsaveForm.startTime:picker-optionspickerOptionsformat…限制只能选择当前时间前/后的时间包含日期、时、分
首先需要给添加一个属性picker-options属性,然后在data中定义这个pickerOptions属性。
el-date-pickerv-modelsaveForm.startTime:picker-optionspickerOptionsformatyyyy-MM-dd HH:mmvalue-formattimestamptypedatetimeplaceholder选择开始时间stylewidth: 47%default-time9:00:00
/
disabledDate用于禁用当前日期前的所有日期有的小伙伴可能会疑问为什么要“-8.64e7”是因为单纯使用time.getTime() Date.now() 这段代码的效果是会使当前日期也会被禁用掉这时候就需要在当前日期的基础上减掉一天表示可以选择当天。 限制完日期后可能还会需要限制时间的选择这里我们使用selectableRange对时间进行限制获取当前时间然后做一个时间的拼接即可。限制只能选择当前时间前的代码如下稍微变动一下 data(){return:{pickerOptions: {disabledDate: time {return time.getTime() Date.now() - 8.64e7},selectableRange: new Date().getHours() : (new Date().getMinutes() 1) :00 - 23:59:59}}
}
3 ,以上代码只是限制了当天的的时间的选择还没有完成。我们需要在合适的时间对我们的时间选择框进行放开和限制。比如限制只能选择当前时间前的时间那么前一天的时间是00:00:00-23:59:59的时间都可以选择而今天则不能放开全选。参考以下代码 watch:{// 开始时间saveForm.startTime(selectTime){const date new Date(new Date(selectTime).setHours(0,0,0,0)).getTime()const today new Date(new Date().setHours(0,0,0,0)).getTime()if (date today){// 当选择的日期就是当天的时候这个时候就要限制时间应当大于此时此刻的时分秒this.pickerOptions.selectableRange new Date().getHours() :(new Date().getMinutes()1):00 - 23:59:59}else {// 当选择的日期大于当天的时候这时需要把时分秒的限制放开否则不能选择this.pickerOptions.selectableRange 00:00:00 - 23:59:59}},// 结束时间saveForm.endTime(selectTime){const date new Date(new Date(selectTime).setHours(0,0,0,0)).getTime()const today new Date(new Date().setHours(0,0,0,0)).getTime()if (date today){// 当选择的日期就是当天的时候这个时候就要限制时间应当大于此时此刻的时分秒this.pickerOptions.selectableRange new Date().getHours() :(new Date().getMinutes()1):00 - 23:59:59}else {// 当选择的日期大于当天的时候这时需要把时分秒的限制放开否则不能选择this.pickerOptions.selectableRange 00:00:00 - 23:59:59}}
