AntDesignVue a-time-picker 时间限制解决方案
1、html:<a-row><a-col :span="24" class="configRow">休息时间维护: 中午:<a-time-pickerv-model="amRestStartTime" @change="(val,dateStrings)=>changeTime(val,dateStrings,'startTime')" format="HH:m
·
1、html:
<a-row>
<a-col :span="24" class="configRow">休息时间维护: 中午:<a-time-picker v-model="amRestStartTime" @change="(val,dateStrings)=>changeTime(val,dateStrings,'startTime')" format="HH:mm:ss"/><span> ---- </span><a-time-picker :disabledHours="getDisabledHours" :disabledMinutes="getDisabledMinutes" :disabledSeconds="getDisabledSeconds" format="HH:mm:ss" v-model="amRestEndTime" @change="(val,dateStrings)=>changeTime(val,dateStrings,'endTime')" /> 晚间:<a-time-picker format="HH:mm:ss" v-model="pmRestStartTime" @change="onPmStartChangeYj" /><span> ---- </span><a-time-picker format="HH:mm:ss" v-model="pmRestEndTime" @change="onPmEndChangeYj" /> </a-col>
</a-row>
2.ts
changeTime(val: any, dateStrings: any, type: string) {
if (type === 'startTime') {
this.amRestStart = dateStrings
} else {
this.amRestEnd = dateStrings
}
}
getDisabledHours() {
const hours = []
const time = this.amRestStart
const timeArr = time.split(':')
for (var i = 0; i < parseInt(timeArr[0]); i++) {
hours.push(i)
}
return hours
}
getDisabledMinutes(selectedHour: number) {
const time = this.amRestStart
const timeArr = time.split(':')
const minutes = []
if (selectedHour === parseInt(timeArr[0])) {
for (var i = 0; i < parseInt(timeArr[1]); i++) {
minutes.push(i)
}
}
return minutes
}
getDisabledSeconds(selectedHour: number, selectedMinute: number) {
const time = this.amRestStart
const timeArr = time.split(':')
const second = []
if (selectedHour === parseInt(timeArr[0]) && selectedMinute === parseInt(timeArr[1])) {
for (var i = 0; i <= parseInt(timeArr[2]); i++) {
second.push(i)
}
}
return second
}
时分秒传值注意事项:
需要分配两个值 1、v-model接收组件的值 2、自定义一个值 获取时分秒 即change函数里面的时分秒往后台传值
接收时 把组件的值用来接收给v-model 否则 报 Invliate date
更多推荐
已为社区贡献19条内容
所有评论(0)