微信小程序日历面板插件

创建日历面板组件，在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:;
    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:;
    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&&currentMonth==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