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

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

3.获取完整代码

4.更多小程序源码,关注苏苏的码云

  • 7
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序自定义组件是一种可以复用的UI组件,可以在不同的页面中使用。在微信小程序中,我们可以通过使用`Component`函数来创建自定义组件。 要创建一个自定义组件,你需要在`components`目录下创建一个新的文件夹,并在该文件夹中创建一个`.json`、`.wxml`、`.wxss`和`.js`文件。其中,`.json`文件用于配置组件的属性、样式等信息,`.wxml`文件用于定义组件的结构,`.wxss`文件用于定义组件的样式,`.js`文件用于编写组件的逻辑。 在`.json`文件中,你可以配置组件的属性、样式等信息。例如: ```json { "component": true, "usingComponents": {}, "properties": {}, "data": {}, "methods": {} } ``` 在`.wxml`文件中,你可以使用标签和组件来定义组件的结构,并通过`{{}}`来绑定数据。例如: ```xml <view> <text>{{title}}</text> </view> ``` 在`.wxss`文件中,你可以定义组件的样式。例如: ```css text { color: #333; font-size: 16px; } ``` 在`.js`文件中,你可以编写组件的逻辑代码。例如: ```javascript Component({ properties: {}, data: {}, methods: {} }) ``` 然后,在需要使用自定义组件的页面中引入组件,并在页面的`.json`文件中配置组件的路径。例如: ```json { "usingComponents": { "custom-component": "/components/custom-component/custom-component" } } ``` 最后,在页面的`.wxml`文件中使用自定义组件。例如: ```xml <custom-component title="Hello World"></custom-component> ``` 这样就完成了一个简单的微信小程序自定义组件的创建和使用。希望能对你有所帮助!如果有更多问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值