vue+iview中日期时间选择器不能选择当前日期之前包括时分秒
vue+iview中日期时间选择器不能选择当前日期之前包括时分秒
·
iview的时间日期选择器DatePicker中的type="datetime",
日期限制不能选择当前日期之前的日期可以使用属性options,
现有需求限制时分秒也不能选择当前的可以使用属性time-picker-options,time-picker-options有几个参数分别是disabledHours、disabledMinutes、disabledSeconds
此外还有一个steps在此就不多说了,有需要可以去了解官网
上代码:
下面是html代码
<DatePicker
v-model="formValidate.captchaEffectTime"
:options="options4"
:time-picker-options="{disabledHours: disabledHours,disabledMinutes:disabledMinutes,disabledSeconds:disabledSeconds}"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
placeholder=""/>
接下来是data初始化中的代码:
options4: {
disabledDate (date) {
return date && date.valueOf() < Date.now() - 86400000// 不能选今天之前的日期
// return date && date.valueOf() > Date.now() - 86400000;//不能选今天和今天之后的日期
// return date && date.valueOf() > Date.now()// 不能选今天之后的日期
}
},
disabledHours: [], // 审批不可选择时
disabledMinutes: [], // 审批不可选择分
disabledSeconds: []// 审批不可选择秒
下面是定义当前时间之前的时分秒,限制可选择:
getTimePickerOptions () {
let d = new Date()
let hour = d.getHours()
let minute = d.getMinutes()
let second = d.getSeconds()
for (let i = 0; i < hour; i++) {
this.disabledHours[i] = i
}
for (let i = 0; i < minute; i++) {
this.disabledMinutes[i] = i
}
for (let i = 0; i < second; i++) {
this.disabledSeconds[i] = i
}
// console.log(this.disabledHours)
// console.log(this.disabledMinutes)
// console.log(this.disabledSeconds)
},
getTimePickerOptions方法可以在需要的时候调用,
到此就完成啦,希望可以帮助到各位同学o(* ̄▽ ̄*)ブ
更多推荐
已为社区贡献20条内容
所有评论(0)