微信小程序自定义日期区间选择日历组件

苏苏哇哈哈

已于 2022-11-10 12:57:56 修改

阅读量4.9k

点赞数 8

分类专栏：小程序微信小程序文章标签：微信小程序小程序 css3

于 2021-11-22 16:15:44 首次发布

本文链接：https://blog.csdn.net/qq_48085286/article/details/121473800

版权

小程序同时被 2 个专栏收录

53 篇文章 35 订阅

订阅专栏

微信小程序

43 篇文章 17 订阅

订阅专栏

1.实现效果

可以设置不同的主题色
在这里插入图片描述

2.实现步骤

定义组件date：

在这里插入图片描述

组件的属性properties：

isShow：是否展示日期选择
timeStart：区间的开始时间
timeEnd：区间的结束时间
minDate：日期区间的最小时间，最小时间不要和当前日期相差太久
theme_color：主题色值

组件的方法：

最小时间，可进行自定义，无最大时间，当滑动至页面的底端，每次加载下六个月的日期值。
利用scroll-into-view的属性将日期定位到当前月份。

引入组件

{
  "usingComponents": {
    "date":"../components/date/index"
  },
  "navigationBarTitleText": "自定义多日期选择"
}

<!--minDate最小时间 默认为2018/1/1,日期格式为yyyy/mm/dd ,最小时间和当前日期尽量不要相差太大,无最大日期,在触底时每次加载6个月-->
<date isShow="true" timeStart="{{sel_list.start_time}}" minDate="2019/1/1" timeEnd="{{sel_list.end_time}}" theme_color="#2493F8"
  bind:tapYes="dateSubmit" bind:tapNo="closeModal" id="date" />