个人日记『Diary』

🗓u-calendar 设置默认日期之后无法选择时间

33 条评论

更新代码之后，另外一个困扰了自己很久的问题就是使用页面生成器生辰的代码中集成了u-calendar，该组件有个 @property {Boolean} dateValue 默认日期属性 。但是比较奇怪的是设置默认日志之后时间选择就失效了，无法选择其他时间。

时间选择器代码：

<u-calendar showLunar v-model="showDate" mode="date" @change="confirmDate"  btn-type="warning" date-value="2000-01-01"
active-bg-color="#ffb5db">
</u-calendar>

代码里面开放的属性：

/**
     * calendar 日历
     * @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
     * @tutorial http://uviewui.com/components/calendar.html
     * @property {String} mode 选择日期的模式，date-为单个日期，range-为选择日期范围
     * @property {Boolean} v-model 布尔值变量，用于控制日历的弹出与收起
     * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
     * @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
     * @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
     * @property {String Number} max-year 可切换的最大年份(默认2050)
     * @property {String Number} min-year 最小可选日期(默认1950)
     * @property {String Number} min-date 可切换的最小年份(默认1950-01-01)
     * @property {String Number} max-date 最大可选日期(默认当前日期)
     * @property {String Number} 弹窗顶部左右两边的圆角值，单位rpx(默认20)
     * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
     * @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
     * @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
     * @property {String} color 日期字体的默认颜色(默认#303133)
     * @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#19be6b)
     * @property {String Number} z-index 弹出时的z-index值(默认10075)
     * @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
     * @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(25, 190, 107, 0.13))
     * @property {String} range-color 选择范围内字体颜色(默认#19be6b)
     * @property {String} start-text 起始日期底部的提示文字(默认 '开始')
     * @property {String} end-text 结束日期底部的提示文字(默认 '结束')
     * @property {String} btn-type 底部确定按钮的主题(默认 'primary')
     * @property {String} toolTip 顶部提示文字，如设置名为tooltip的slot，此参数将失效(默认 '选择日期')
     * @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
     * @property {Boolean} dateValue 默认日期
     * @example <u-calendar v-model="show" :mode="mode"></u-calendar>
     */

表面上看，直接设置默认日期即可将日历定位到这个设置的时间。但是，只设置这一个属性就会导致其他的时间全部都无法选择。

其实最终的问题在于默认时间的实现逻辑有问题：

init() {
                let now = new Date();
                if(this.dateValue){
                    now = this.string2date(this.dateValue);
                }
                this.year = now.getFullYear();
                this.month = now.getMonth() + 1;
                this.day = now.getDate();
                this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
                this.activeDate = this.today;
                this.min = this.initDate(this.minDate);
                this.max = this.initDate(this.maxDate || this.today);
                this.startDate = "";
                this.startYear = 0;
                this.startMonth = 0;
                this.startDay = 0;
                this.endYear = 0;
                this.endMonth = 0;
                this.endDay = 0;
                this.endDate = "";
                this.isStart = true;
                this.changeData();
            },

表面上看将时间定位到了今天，但是除此之外开始日期，结束日期都有问题。就导致其他的时间全部无法选择。

另外一个问题就是设置最小时间，最大时间之后月份跳转并不会受这两个时间的限制，可以浏览这两个时间以外的日期，但是无法选择，所以要限制选择显示时间必须要设置如下的四个属性：

date-value="2000-01-01" min-date="1969-01-01" max-date="2015-01-31" min-year="1968" max-year="2015"

此时才能将  时间范围限制住。

☆版权☆

* 网站名称：obaby@mars
* 网址：https://oba.by/
* 个性：https://oba.by/
* 本文标题： 《🗓u-calendar 设置默认日期之后无法选择时间》
* 本文链接：https://zhongxiaojie.com/2024/05/17129
* 短链接：https://oba.by/?p=17129
* 转载文章请标明文章来源，原文标题以及原文链接。请遵从 《署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN) 》许可协议。

obaby

obaby

爱好广泛的火星小妖精，有问题欢迎留言交流啊~(✪ω✪) 爬虫类工具请先点击这个链接查看用法https://oba.by/?p=12240 闺蜜圈APP下载 https://guimiquan.cn

You may also like

33 comments

      2.  Level 3
        Google Chrome 124 Google Chrome 124 Windows 11 Windows 11 cn陕西省西安市 移动

        咱俩估计看的内容一样，黑A 你要不要，不要喊声大

        回复
  2.   Level 6
    Safari 17 Safari 17 iPhone iOS 17.4.1 iPhone iOS 17.4.1 cn浙江省杭州市 华数

    表面上看将时间定位到了今天，但是除此【职位】开始日期

    回复
    1. 公主 Queen 
      Google Chrome 120 Google Chrome 120 Windows 10 Windows 10 cn山东省青岛市 联通

      嗯，图片打不开，评论不支持markdown 我改成img标签了，不显示。那个图片显示404了

      回复
  7. Level 3
    Google Chrome 86 Google Chrome 86 Windows 10 Windows 10 cn四川省成都市 联通

    这个图让我实在看不进代码了

    当然没有图也一样。

    是用爬虫爬来的吗

    回复
    1. 公主 Queen 
      Google Chrome 120 Google Chrome 120 Windows 10 Windows 10 cn山东省青岛市 联通

      嗯嗯，参考本站的各种爬虫，具体可以搜索爬虫了解，嘻嘻

      回复
    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 联通

      不碍事，就发不出来了。肯定又要被举报了

      回复
  11.  Level 5
    Google Chrome 121 Google Chrome 121 Mac OS X 10.15 Mac OS X 10.15 us美国

    最近备案不查你了啊，图片又开始恢复网站的风格，这个风格我叫他。公共场合浏览社死风格，所以我从来不在有人的时候打开你的博客….这个好像是个男娘，女性化特征不明显，面部轮廓像男性。

    回复
    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 联通

      额，酱紫的吗。竟然是个南梁。
      哈哈哈，没漏点，所以，也没神马吧。

      回复
      1.  Level 5
        Google Chrome 121 Google Chrome 121 Mac OS X 10.15 Mac OS X 10.15 cn北京市 联通

        应该是男娘，很瘦小，熊是做的，鼻子出卖了她的身份。嗯，鉴赏男娘我是专业的，你知道我喜欢看男娘。

        回复
        1. 公主 Queen 
          Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 联通

          额，你这么一说还真是呢。
          传图的时候就看到了，没注意。
          的确是你说的酱紫。
          一般女生倒是很少带颈环～～

          回复

发表回复

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

Close Menu