代码如下:
<template>
<div>
<Alert show-icon>当前 View UI(iView)版本为 4.0.2</Alert>
<Row>
<Col span="12">
<DatePicker type="datetime" format="yyyy-MM-dd HH:mm" :options="options3" placeholder="Select date" style="width: 200px"></DatePicker>
</Col>
<Col span="12">
<DatePicker type="datetime" format="yyyy-MM-dd HH:mm" :options="options4" placeholder="Select date" style="width: 200px"></DatePicker>
</Col>
</Row>
</div>
</template>
<script>
export default {
data () {
return {
options3: {
disabledDate (date) {
return date && date.valueOf() < Date.now();
}
},
options4: {
disabledDate (date) {
const disabledDay = date.getDate();
return disabledDay === 1;
}
}
}
},
methods: {
},
mounted () {
}
}
</script>
<style>
</style>
如示例中的禁用了今天的日期,但是日期选择面板左下角的选择时间可以选择,点击确定后,时间输入框就表现的是能选择今天的日期了,操作效果如下:
这个该怎么控制禁止时间?想要的效果是日期禁止了,选择时间也不能选
这个问题当时是没找到DatePicker中关于这个问题方面的设置;
于是 在@on-change中写判断,或者在表单验证里增加判断,选了禁用的日期就清除掉并提示重新选择。。。没办法的办法,算是解决了吧,期待官方组件解决下这个问题。