iview DatePicker type是datetime时 禁用当天时间后 选择时间可以选择当天的了

代码如下:

<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>

代码演示

如示例中的禁用了今天的日期,但是日期选择面板左下角的选择时间可以选择,点击确定后,时间输入框就表现的是能选择今天的日期了,操作效果如下:
日期时间选择.gif

这个该怎么控制禁止时间?想要的效果是日期禁止了,选择时间也不能选

回答:

这个问题当时是没找到DatePicker中关于这个问题方面的设置;
于是 在@on-change中写判断,或者在表单验证里增加判断,选了禁用的日期就清除掉并提示重新选择。。。没办法的办法,算是解决了吧,期待官方组件解决下这个问题。

回答:

碰到这个问题了,题主有解决方案吗?

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注