iview的时间日期选择器DatePicker中的type="datetime",
日期限制不能选择当前日期之前的日期可以使用属性options,
现有需求限制时分秒也不能选择当前的可以使用属性time-picker-options,time-picker-options有几个参数分别是disabledHours、disabledMinutes、disabledSeconds
此外还有一个steps在此就不多说了,有需要可以去了解官网
上代码:
下面是html代码
- 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(* ̄▽ ̄*)ブ