需求:日期是需要当天以及之后七天的时间范围,时间是限制在10点到19点
踩坑记录:在做这个需求时,出现一个对于我来说一个巨大的坑,我在写的时候,发现selectableRange不生效,搜索很多方法都没有用,然后偶然一个契机让我发现竟然是因为element框架版本问题,更新之后就可以使用了,真的是,知道原因之后我裂开了
html部分
<el-date-picker
class="dateClass"
v-model="aa"
type="datetime"
:picker-options="pickerOptions"
placeholder="请选择时间"
style="width: 30%"
>
</el-date-picker>
js部分
export default {
data () {
return {
aa: '',
pickerOptions: {
// 限制时间
selectableRange: ['12:00:00 - 23:59:59'],
// 限制日期
disabledDate: this.disabledDate
}
}
},
methods: {
disabledDate (time) {
const dateTime = new Date()
const startTime = dateTime.setDate(dateTime.getDate() - 1)
const endTime = dateTime.setDate(dateTime.getDate() + 7)
return (
time.getTime() < new Date(startTime).getTime() ||
time.getTime() > new Date(endTime).getTime()
)
}
}
}
展示效果:
日期限制范围后效果
时间限制范围后效果
就这样!!!!踩坑记录
|