问题是这样的,使用el-date-picker时间选择器,type=datetime,即又能选日期又能选时间。需要做的限制是,开始时间只能选择当前时间之后的时间,其余禁用,禁用级别到小时,目前实现效果如下图:
代码如下:
<el-form-item label="出勤开始时间:" prop="attendanceBeginTime">
<el-date-picker
type="datetime"
format="yyyy-MM-dd HH:mm" //格式化时间
v-model="formData.attendanceBeginTime"
:picker-options="pickerOptions1"
placeholder="选择日期时间"
@change="getDateTime1"></el-date-picker>
</el-form-item>
<el-form-item label="出勤结束时间:" prop="endTime">
<el-date-picker
type="datetime"
format="yyyy-MM-dd HH:mm"
v-model="formData.attendanceEndTime"
:picker-options="pickerOptions2"
placeholder="选择日期时间"
@change="getDateTime2"></el-date-picker>
</el-form-item>
pickerOptions1: {
disabledDate (time) { // 时间的禁用
if (me.formData.attendanceEndTime) {
return time.getTime() > me.formData.attendanceEndTime || time.getTime() < Date.now() - 8.64e7 // 如果选择了结束时间,可选择时间段为当前时间到结束时间
} else {
return time.getTime() < Date.now() - 8.64e7 // 未选择结束时间时,可选择时间段为当前时间之后的所有时间
}
},
selectableRange: selectableTime,// 这里采用了一个取巧的做法,所有的可选择时间是可列举的,这里用一个for循环将24小时以字符串形式列举在selectableRange中,
但其时间段仅为00:00:00 -00:00:01,仅多一秒,在时间format="yyyy-MM-dd HH:mm"时是无法选择到分的
},
pickerOptions2: {
disabledDate (time) {
if (me.formData.attendanceBeginTime) return time.getTime() < me.formData.attendanceBeginTime - 24 * 60 * 60 * 1000 // 结束时间大于起始时间
},
selectableRange: selectableTime
},
getDateTime1 (val) {
this.formData.attendanceBeginTime = new Date(val).getTime()
},
getDateTime2 (val) {
this.formData.attendanceEndTime = new Date(val).getTime()
},
function getTime() {
let hour = ''
let range = []
for(let i = 0;i < 24; i++) {
if (i< 10) {
hour = '0' + i
} else {
hour = i
}
range.push(`${hour}:00:00 - ${hour}:00:01`)
}
return range
}
export const selectableTime = getTime()
代码中未实现的功能是直接禁用到小时级别,即如果用户选择的时间是今天,那么今天已经过去的小时数也不可选,所以此处借助了form表单校验,代码如下:
data(){
let me = this
let attendanceBeginTime = (rule, value, callback) => {
if (!me.formData.attendanceBeginTime) {
return callback(new Error('请选择出勤开始时间'))
} else if (me.formData.attendanceBeginTime < Date.now()) {
return callback(new Error('出勤开始时间必须大于当前时间'))
} else {
callback()
}
}
return {
rules: {
attendanceBeginTime: [{ validator: attendanceBeginTime, trigger: 'change' }],
}
}
}
功能基本完成。