小程序日历组件不更新了，正式转为uni-app组件，相对比功能更丰富 。移步插件市场；
先来看看什么样子
回到今天.gif
一.主要功能
日期选择
“看第一预览图”-
日期切换
日期选择.gif -
月份切换
月份选择.gif 回到今天
“看第一预览图”-
记录选中
选中状态.png
二.使用
最下面放上下载地址
- 代码结构
将下载下来的文件 wx-calendar.rar 解压放到 components 文件夹下
image.png
- 引入代码
打开pages/xxx/xxx.json xxx 为你需要引入的文件名 ，已xxx = index 为例
// pages/index/index.js
{
"usingComponents": {
"calendar": "/components/calendar/calendar"
}
}
- 使用代码
打开pages/xxx/xxx.wxmlxxx 为你需要引入的文件名 ，已xxx = index 为例
// pages/index/index.wxml
<!--
* 日历选择组件
* selected [Arrey] 那些日期被选中
* bindselect [function] 日历是否被打开
* bindgetdate [function] 当前选择的日期
* is-open [Boolean} 是否开启插入模式
-->
<!-- <view class='other'>我是其他元素</view> -->
<calendar selected="{{selected}}" bindselect="bindselect" bindgetdate="bindgetdate" />
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
selected: [
{
date: '2018-5-21'
}, {
date: '2018-5-22'
},{
date: '2018-5-24'
},{
date: '2018-5-25'
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { },
/**
* 日历是否被打开
*/
bindselect(e) {
console.log(e.detail.ischeck)
},
/**
* 获取选择日期
*/
bindgetdate(e) {
let time = e.detail;
console.log(time)
}
})
三.相关属性说明
| 参数名 | 默认值 | 说明 |
|---|---|---|
selected |
[Array] | 记录值 |
bindselect |
[function] | 日历是否被打开 |
bindgetdate |
[function] | 被选中的日期 |
is-open |
[boolean] false | 是否为插入模式（可以被插入到‘dom’里） |
以上，就是组件的时候方法了，如果使用过程中，有问题可以联系我。
wx-calendar组件 : 代码下载
