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

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

阅读 5.6k
2 个回答

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

新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题