├── README.md ├── demo ├── app.js ├── app.json ├── pages │ ├── checkin │ │ ├── checkin.js │ │ ├── checkin.json │ │ ├── checkin.wxml │ │ └── checkin.wxss │ ├── datepicker │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ └── index │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss └── utils │ └── util.js └── snapshots ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png └── 6.png /README.md: -------------------------------------------------------------------------------- 1 | # wxp-calendar 2 | 3 | > 小程序日历插件。（已发布，插件的相关使用问题及bug反馈，欢迎大家提交至本repo的issues） 4 | 5 | # 插件appid 6 | 7 | > 本插件appid为 wx42b95b4509175304 8 | 9 | # 当前版本 10 | > 1.0.1 11 | 12 | ## 说明 13 | 14 | > 本插件内包含两个自定义组件，wxc-date-picker和 wxc-checkin-picker 15 | 16 | ## 使用方式 17 | 18 | > 本插件appid为wx42b95b4509175304， 请在小程序后台设置 > 第三方服务 > 插件中搜索此插件appid并使用。小程序 app.json 中使用插件的样例代码： 19 | ```javascript 20 | "plugins": { 21 | "wui": { 22 | "version": "1.0.1", 23 | "provider": "wx42b95b4509175304" 24 | } 25 | } 26 | ``` 27 | 28 | ## API 29 | ## wxc-date-picker(日历选择组件） 30 | 31 | ### wxc-date-picker【props 】 32 | 33 | | 名称         | 类型|描述                                                                                                           | 34 | | ------------ |--- |-------------------------------------------------------------------------------------------------------------- | 35 | | `date`       |string |[说明]：日期选择期中默认选择的时间，如未传，默认选中当前时间(格式: "yyyy-MM-dd DD:HH:mm")                                                   | 36 | | `enableTime` |bool | [说明]：是否允许选择时间，由于微信默认 time 的 picker 仅支持到分，这里同样，有兴趣的同学可自行拓展至支持时分秒 | 37 | 38 | ### wxc-date-picker【bind 】 39 | 40 | | 名称 | 描述 | 41 | | -------------- | -------------------------------------------------------------------------------------------- | 42 | | `onselectdate` | [说明]：选择时间后点击确定会触发此事件，在使用此组件的 Page，或者 Component 中响应此事件即可 | 43 | 44 | ## 使用 45 | 46 | > 可参见 demo 47 | 48 | ## 截图 49 | 50 | ![](https://github.com/yautah/wxp-calendar/blob/master/snapshots/1.png?raw=true) 51 | ![](https://github.com/yautah/wxp-calendar/blob/master/snapshots/2.png?raw=true) 52 | ![](https://github.com/yautah/wxp-calendar/blob/master/snapshots/3.png?raw=true) 53 | 54 | 55 | 56 | 57 | ## API 58 | ## wxc-checkin-picker(酒店/旅馆等行业用于选择入住/离店日期的日历组件） 59 | 60 | ### wxc-checkin-picker【props 】 61 | 62 | | 名称         | 类型|描述                                                                                                           | 63 | | ------------ | --- |-------------------------------------------------------------------------------------------------------------- | 64 | | `limitDays`       |number |[说明]：可选择的连续入住天数                                                  | 65 | | `limitMonths`       |number |[说明]：可接几个月内的预订（显示几个月的日历）                                                   | 66 | | `checkInOn`       |number |[说明]：默认入住日期（时间戳，毫秒数） | 67 | | `checkOutOn`       |number |[说明]：默认离开日期（时间戳，毫秒数） | 68 | | `checkInText`       | string|[说明]：入住文字显示（默认“入住”）| 69 | | `checkOutText` | string |[说明]：入住文字显示（默认“离店”） | 70 | | `checkedColor` | string |[说明]：选中日期的背景色 | 71 | | `checkedTextColor` | string |[说明]：选中日期的文字颜色 | 72 | 73 | ### wxc-checkin-picker【bind 】 74 | 75 | | 名称 | 描述 | 76 | | -------------- | -------------------------------------------------------------------------------------------- | 77 | | `onconfirm` | [说明]：选择入住/离店时间后的trigger事件 | 78 | 79 | ## 使用 80 | 81 | > 可参见 demo 82 | 83 | ## 截图 84 | 85 | ![](https://github.com/yautah/wxp-calendar/blob/master/snapshots/4.png?raw=true) 86 | ![](https://github.com/yautah/wxp-calendar/blob/master/snapshots/5.png?raw=true) 87 | ![](https://github.com/yautah/wxp-calendar/blob/master/snapshots/6.png?raw=true) 88 | -------------------------------------------------------------------------------- /demo/app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | flash: {}, 4 | 5 | setFlash(key, v) { 6 | this.flash[key] = v 7 | }, 8 | 9 | getFlash(k) { 10 | const value = this.flash[k] 11 | delete this.flash[k] 12 | return value 13 | }, 14 | onLaunch: function () { 15 | } 16 | }) -------------------------------------------------------------------------------- /demo/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/checkin/checkin", 5 | "pages/datepicker/index" 6 | ], 7 | "plugins": { 8 | "calender": { 9 | "version": "1.0.1", 10 | "provider": "wx42b95b4509175304" 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /demo/pages/checkin/checkin.js: -------------------------------------------------------------------------------- 1 | // pages/checkin.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | 12 | 13 | onLoad(options) { 14 | const {checkin, checkout} = options 15 | this.setData({ 16 | checkInOn: checkin, 17 | checkOutOn: checkout 18 | }) 19 | }, 20 | 21 | handleConfirmDate(e) { 22 | getApp().setFlash("check", e.detail) 23 | wx.navigateBack({ 24 | 25 | }) 26 | } 27 | }) -------------------------------------------------------------------------------- /demo/pages/checkin/checkin.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "usingComponents": { 4 | "checkin-picker": "plugin://calender/checkin-picker" 5 | } 6 | } -------------------------------------------------------------------------------- /demo/pages/checkin/checkin.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /demo/pages/checkin/checkin.wxss: -------------------------------------------------------------------------------- 1 | /* pages/checkin.wxss */ -------------------------------------------------------------------------------- /demo/pages/datepicker/index.js: -------------------------------------------------------------------------------- 1 | // pages/datepicker/index.js 2 | Page({ 3 | 4 | handleSelectDate(e) { 5 | const {date} = e.detail 6 | wx.showModal({ 7 | title: '当前选择', 8 | content: date, 9 | }) 10 | } 11 | }) -------------------------------------------------------------------------------- /demo/pages/datepicker/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "date-picker": "plugin://calender/date-picker" 4 | } 5 | } -------------------------------------------------------------------------------- /demo/pages/datepicker/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 默认风格 5 | 6 | 7 | 带时间选择框 8 | 9 | 10 | 传入初始已选择时间 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /demo/pages/datepicker/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/datepicker/index.wxss */ 2 | 3 | page { 4 | background-color: #eee; 5 | } -------------------------------------------------------------------------------- /demo/pages/index/index.js: -------------------------------------------------------------------------------- 1 | import utils from "../../utils/util.js" 2 | Page({ 3 | onShow: function() { 4 | const check = getApp().getFlash('check') 5 | if(check) { 6 | this.setData({ 7 | check: { 8 | checkInOn: check.checkInOn, 9 | checkOutOn: check.checkOutOn, 10 | checkInDate: utils.formatTime(new Date(check.checkInOn), 'yyyy-MM-dd'), 11 | checkOutDate: utils.formatTime(new Date(check.checkOutOn), 'yyyy-MM-dd'), 12 | } 13 | }) 14 | } 15 | }, 16 | 17 | 18 | }) 19 | 20 | -------------------------------------------------------------------------------- /demo/pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /demo/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 住店时间: 5 | 6 | 7 | {{check.checkInDate}} - {{check.checkOutDate}} 8 | 9 | 10 | 请选择入住时间 11 | 12 | 13 | 14 | 15 | 16 | 日历控件: 17 | 18 | 查看演示 19 | 20 | 21 | -------------------------------------------------------------------------------- /demo/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | .row{ 2 | padding: 24rpx 0rpx; 3 | border-bottom: 1rpx solid #e5e5e5; 4 | display:flex; 5 | align-items: center; 6 | } 7 | 8 | .label { 9 | width: 160rpx; 10 | } 11 | 12 | .content { 13 | flex: 1; 14 | } 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /demo/utils/util.js: -------------------------------------------------------------------------------- 1 | 2 | function formatTime(date, fmt = 'yyyy-MM-dd hh:mm:ss') { //author: meizz 3 | var o = { 4 | "M+": date.getMonth() + 1, //月份 5 | "d+": date.getDate(), //日 6 | "h+": date.getHours(), //小时 7 | "m+": date.getMinutes(), //分 8 | "s+": date.getSeconds(), //秒 9 | "q+": Math.floor((date.getMonth() + 3) / 3), //季度 10 | "S": date.getMilliseconds() //毫秒 11 | }; 12 | if (/(y+)/.test(fmt)) 13 | fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); 14 | for (var k in o) 15 | if (new RegExp("(" + k + ")").test(fmt)) 16 | fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); 17 | return fmt; 18 | }; 19 | 20 | 21 | 22 | module.exports = { 23 | 24 | formatTime, 25 | 26 | }; 27 | -------------------------------------------------------------------------------- /snapshots/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yautah/wxp-calendar/be6308054ea498235d4bd4ffbe22d9191df52fd6/snapshots/1.png -------------------------------------------------------------------------------- /snapshots/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yautah/wxp-calendar/be6308054ea498235d4bd4ffbe22d9191df52fd6/snapshots/2.png -------------------------------------------------------------------------------- /snapshots/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yautah/wxp-calendar/be6308054ea498235d4bd4ffbe22d9191df52fd6/snapshots/3.png -------------------------------------------------------------------------------- /snapshots/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yautah/wxp-calendar/be6308054ea498235d4bd4ffbe22d9191df52fd6/snapshots/4.png -------------------------------------------------------------------------------- /snapshots/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yautah/wxp-calendar/be6308054ea498235d4bd4ffbe22d9191df52fd6/snapshots/5.png -------------------------------------------------------------------------------- /snapshots/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yautah/wxp-calendar/be6308054ea498235d4bd4ffbe22d9191df52fd6/snapshots/6.png --------------------------------------------------------------------------------