小程序日歷組件不更新了吞琐，正式轉(zhuǎn)為uni-app組件，相對比功能更豐富 窘奏。移步插件市場萍程；
先來看看什么樣子
回到今天.gif
一.主要功能
日期選擇
“看第一預覽圖”-
日期切換
日期選擇.gif -
月份切換
月份選擇.gif 回到今天
“看第一預覽圖”-
記錄選中
選中狀態(tài).png
二.使用
最下面放上下載地址
- 代碼結(jié)構(gòu)
將下載下來的文件 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({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
selected: [
{
date: '2018-5-21'
}, {
date: '2018-5-22'
},{
date: '2018-5-24'
},{
date: '2018-5-25'
}
]
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) { },
/**
* 日歷是否被打開
*/
bindselect(e) {
console.log(e.detail.ischeck)
},
/**
* 獲取選擇日期
*/
bindgetdate(e) {
let time = e.detail;
console.log(time)
}
})
三.相關(guān)屬性說明
| 參數(shù)名 | 默認值 | 說明 |
|---|---|---|
selected |
[Array] | 記錄值 |
bindselect |
[function] | 日歷是否被打開 |
bindgetdate |
[function] | 被選中的日期 |
is-open |
[boolean] false | 是否為插入模式（可以被插入到‘dom’里） |
以上幢尚，就是組件的時候方法了，如果使用過程中送滞，有問題可以聯(lián)系我侠草。
wx-calendar組件 : 代碼下載
