创建日历面板组件,在components目录下创建calendar文件夹
1、calendar.js
// components/calendar/calendar.js var util = require(‘../../utils/util.js‘) Component({ /** * 组件的属性列表 */ properties: { currentYear: { // 当前显示的年 type: Number, value: new Date().getFullYear() }, currentMonth: { // // 当前显示的月 type: Number, value: new Date().getMonth() + 1 }, nowYear: { // // 当前显示的月 type: Number, value: new Date().getFullYear() }, nowMonth: { // // 当前显示的月 type: Number, value: new Date().getMonth() + 1 }, nowDate: { // // 当前显示的月 type: Number, value: new Date().getDate() } }, /** * 组件的初始数据 */ data: { currentMonthDateLen: 0, // 当月天数 preMonthDateLen: 0, // 当月中,上月多余天数 allArr:[], // nowData:"" }, ready(){ this.getAllArr() }, onLoad: function () { // 调用函数时,传入new Date()参数,返回值是日期和时间 var time = util.formatTime(new Date()); // 再通过setData更改Page()里面的data,动态更新页面的数据 this.setData({ nowData: time }); consolelog("this.data.nowData") console.log(this.data.nowData) }, /** * 组件的方法列表 */ methods: { // 获取某年某月总共多少天 getDateLen(year, month) { let actualMonth = month - 1; let timeDistance = +new Date(year, month) - +new Date(year, actualMonth); return timeDistance / (1000 * 60 * 60 * 24); }, // 获取某月1号是周几 getFirstDateWeek(year, month) { return new Date(year, month - 1, 1).getDay() }, // 上月 年、月 preMonth(year, month) { if (month == 1) { return { year: --year, month: 12 } } else { return { year: year, month: --month } } }, // 下月 年、月 nextMonth(year, month) { if (month == 12) { return { year: ++year, month: 1 } } else { return { year: year, month: ++month } } }, // 获取当月数据,返回数组 getCurrentArr(){ let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth) // 获取当月天数 let currentMonthDateArr = [] // 定义空数组 if (currentMonthDateLen > 0) { for (let i = 1; i <= currentMonthDateLen; i++) { currentMonthDateArr.push({ month: ‘current‘, // 只是为了增加标识,区分上下月 date: i }) } } this.setData({ currentMonthDateLen }) return currentMonthDateArr }, // 获取当月中,上月多余数据,返回数组 getPreArr(){ let preMonthDateLen = this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth) // 当月1号是周几 == 上月残余天数) let preMonthDateArr = [] // 定义空数组 if (preMonthDateLen > 0) { let { year, month } = this.preMonth(this.data.currentYear, this.data.currentMonth) // 获取上月 年、月 let date = this.getDateLen(year, month) // 获取上月天数 for (let i = 0; i < preMonthDateLen; i++) { preMonthDateArr.unshift({ // 尾部追加 month: ‘pre‘, // 只是为了增加标识,区分当、下月 date: date }) date-- } } this.setData({ preMonthDateLen }) return preMonthDateArr }, // 获取当月中,下月多余数据,返回数组 getNextArr() { let nextMonthDateLen = 35 - this.data.preMonthDateLen - this.data.currentMonthDateLen // 下月多余天数 let nextMonthDateArr = [] // 定义空数组 if (nextMonthDateLen > 0) { for (let i = 1; i <= nextMonthDateLen; i++) { nextMonthDateArr.push({ month: ‘next‘,// 只是为了增加标识,区分当、上月 date: i }) } } return nextMonthDateArr }, // 整合当月所有数据 getAllArr(){ let preArr = this.getPreArr() let currentArr = this.getCurrentArr() let nextArr = this.getNextArr() let allArr = [...preArr, ...currentArr, ...nextArr] this.setData({ allArr }) let sendObj = { currentYear: this.data.currentYear, currentMonth: this.data.currentMonth, nowYear: this.data.nowYear, nowMonth: this.data.nowMonth, nowDate: this.data.nowDate, allArr: allArr } // console.log(sendObj) this.triggerEvent(‘sendObj‘, sendObj) }, // 点击 上月 gotoPreMonth(){ let { year, month } = this.preMonth(this.data.currentYear, this.data.currentMonth) this.setData({ currentYear: year, currentMonth: month }) this.getAllArr() }, // 点击 下月 gotoNextMonth() { let { year, month } = this.nextMonth(this.data.currentYear, this.data.currentMonth) this.setData({ currentYear: year, currentMonth: month }) this.getAllArr() }, getNowData(e) { var data = e.currentTarget.dataset.day; var currency = e.currentTarget.dataset.currency; if (currency==1){ this.setData({ nowYear: this.data.currentYear, nowMonth: this.data.currentMonth, nowDate: data }) } this.getAllArr() } } })
1、calendar.wxss
.calendar{ width: 100%; background:#fff; } .pre,.next{ color:white; background:#1CA2FC; border-radius:100px; height:20px; width:20px; text-align:center; line-height: 20px; } .showData{ display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding-left: 25rpx; padding-right:25rpx; } .showData view{ width: 14%; height: 70rpx; line-height: 70rpx; text-align: center; flex-shrink: 0; font-size: 30rpx; color: #2A2A2A; /* background: rgb(224, 199, 199); */ } .calendar .tit{ display: flex; justify-content: center; align-items: center; padding: 40rpx 0; } .current{ font-size: 36rpx; color: #1CA2FC; font-weight: bold; } .calendar .tit .current{ margin: 0 40rpx; } .calendar .content{ display: flex; flex-wrap: wrap; box-sizing: border-box; padding-left: 25rpx; padding-right:25rpx; } .calendar .content .itemData{ width: 14.2%; height: 70rpx; line-height: 70rpx; flex-shrink: 0; font-size: 30rpx; color: #2A2A2A; text-align:center; display:flex; align-items:center; justify-content:center; /* background: rgb(224, 199, 199); */ } .calendar .content .gray{ color: #999; }
3、calendar.wxml
<view class="calendar"> <view class=‘tit‘> <view class=‘pre‘ bindtap=‘gotoPreMonth‘>{{‘<‘}}</view> <view class=‘current‘>{{currentYear}}-{{currentMonth}}</view> <view class=‘next‘ bindtap=‘gotoNextMonth‘>{{‘>‘}}</view> </view> <view class=‘w100P showData‘> <view style=‘color: #999‘>日</view> <view>一</view> <view>二</view> <view>三</view> <view>四</view> <view>五</view> <view style=‘color: #999‘>六</view> </view> <view class=‘content‘> <!-- <view wx:for="{{allArr}}" wx:key="{{index}}" class="{{item.month == ‘current‘ ? ‘‘ : ‘gray‘}}" style="{{item.date==currentDay?‘color:#fff;background:#1CA2FC‘:‘‘}}" >{{item.date}}</view> --> <view wx:for="{{allArr}}" wx:key="{{index}}" class=‘itemData‘ data-currency="{{item.month == ‘current‘ ? ‘1‘ : ‘0‘}}" data-day=‘{{item.date}}‘ bindtap=‘getNowData‘> <view class="{{item.month == ‘current‘ ? ‘‘ : ‘gray‘}}" style="height:20px;width:20px;line-height:20px;{{item.month == ‘current‘&&nowYear==currentYear&¤tMonth==nowMonth&&item.date==nowDate?‘color:#fff;background:#1CA2FC;border-radius:100px‘:‘‘}}" >{{item.date}}</view> </view > </view> </view>
4、calendar.json
{
"component": true,
"usingComponents": {}
}
5、引用的util
const formatTime = date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.getHours() const minute = date.getMinutes() const second = date.getSeconds() return [year, month, day].map(formatNumber).join(‘/‘) + ‘ ‘ + [hour, minute, second].map(formatNumber).join(‘:‘) } const formatNumber = n => { n = n.toString() return n[1] ? n : ‘0‘ + n } module.exports = { formatTime: formatTime }
6、使用组件
需要使用组件的页面:如这的history
history.json
{ "navigationBarTitleText": "历史数据", "usingComponents": { "calendar": "/component/calendar/calendar" } }
history.wxml
<calendar currentYear=‘2018‘ currentMonth="8" nowYear="2018" nowMonth="8" nowDate="2" bindsendObj=‘getCalendarData‘></calendar>
history.js
getCalendarData(e) { // 监听日历数据 console.log(e.detail) }
效果图
参考:http://www.php.cn/xiaochengxu-409322.html