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

发布于 2022-09-12 00:11:58 字数 1483 浏览 23 评论 0

代码如下:

<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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

恏ㄋ傷疤忘ㄋ疼 2022-09-19 00:11:58

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

荭秂 2022-09-19 00:11:58

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文