近期要做一个预约功能,其中预约日期是有范围限制的,预约的时间点也是按后台配置起止时间的,这就需要前端将不需要的日期和时间设置为不可选择。
效果如下:
1、日期按照后台返回,控制能选择的日期。
2、时间的话,过滤了不可选时间。
这里使用的是iview的DatePicker组件,type为datetime
日期不可选通过options属性来控制, 时间不可选通过time-picker-options属性来控制
代码示例如下,可copy到iview这里运行查看效果:https://run.iviewui.com/S10Xjfll
<template>
<br>
<DatePicker v-modal="time" :options="options3" :time-picker-options="{steps: [1,60],disabledHours: disabledHours,hideDisabledOptions:true}"