公告列表
公告列表
收藏
评论

小程序自定义插件Calendar

小程序对于日历的组件比较匮乏，在这里贡献出两个：

  1. ios风格的日历组件，支持选择到时分。

  2. 酒店/旅馆等行业的入住/离店日期选择，这个在携程、美团等有很多现成的例子，实现起来稍微有点繁琐。


这里以插件的形式提供给大家，已经通过审核。


可以在小程序后台，设置 > 第三方服务 > 小程序插件中搜索appid： wx42b95b4509175304


按照微信文档的说明添加使用即可，更多详细的api请参见github。

wxp-calendar

小程序日历插件。（已发布，插件的相关使用问题及bug反馈，欢迎大家提交至本repo的issues）

插件appid

本插件appid为 wx42b95b4509175304

当前版本

1.0.1

说明

本插件内包含两个自定义组件，date-picker和checkin-picker

使用方式

本插件appid为wx42b95b4509175304， 请在小程序后台设置 > 第三方服务 > 插件中搜索此插件appid并使用。小程序 app.json 中使用插件的样例代码：

"plugins": {
    "calender": {
      "version": "1.0.1",
      "provider": "wx42b95b4509175304"
    }
  }

API

date-picker(日历选择组件）

date-picker【props 】

名称 类型 描述
date string [说明]：日期选择期中默认选择的时间，如未传，默认选中当前时间(格式: "yyyy-MM-dd DD:HH:mm")
enableTime bool [说明]：是否允许选择时间，由于微信默认 time 的 picker 仅支持到分，这里同样，有兴趣的同学可自行拓展至支持时分秒

date-picker【bind 】

名称 描述
onselectDate [说明]：选择时间后点击确定会触发此事件，在使用此组件的 Page，或者 Component 中响应此事件即可

使用

可参见 demo

截图

API

checkin-picker(酒店/旅馆等行业用于选择入住/离店日期的日历组件）

checkin-picker【props 】

名称 类型 描述
limitDays number [说明]：可选择的连续入住天数
limitMonths number [说明]：可接几个月内的预订（显示几个月的日历）
checkInOn number [说明]：默认入住日期（时间戳，毫秒数）
checkOutOn number [说明]：默认离开日期（时间戳，毫秒数）
checkInText string [说明]：入住文字显示（默认“入住”）
checkOutText string [说明]：入住文字显示（默认“离店”）
checkedColor string [说明]：选中日期的背景色
checkedTextColor string [说明]：选中日期的文字颜色

checkin-picker【bind 】

名称 描述
onconfirm [说明]：选择入住/离店时间后的trigger事件

使用

可参见 demo

截图

https://github.com/yautah/wxp-calendar
收藏
请 登录 后发表内容