微信小程序日历组件

//最近接了一个小程序的项目，产品大大提出要在我们的小程序中实现日历功能，一开始是拒绝的，然而em......并么得用......

• 需求其实不复杂，单纯实现pc端的日历功能就ok
• 直接上ui图啦

• 首先先申请一个组件calendar
• calendar.wxml中代码

<!--日历插件-->
<view  class\="cover"  bindtap\="onClose"  hidden\="{{hiddenModel}}"></view\>
<view  class\="calendar">
<view  class\='tit'>
<view  class\='pre'  bindtap\='gotoPreMonth'>
<image  src\="../../image/left\_arrow.png"></image\>
</view\>
<view  class\='current'>{{currentYear}}年{{currentMonth<10?'0'+currentMonth:currentMonth}}月</view\>
<view  class\='next'  bindtap\='gotoNextMonth'>
<image  src\="../../image/right\_arrow.png"></image\>
</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\='itemData'  data-currency\="{{item.month == 'current' ? '1' : '0'}}"  data-item\='{{item}}'  bindtap\='getNowData'>
<view  class\="date {{item.month == 'current' ? '' : 'gray'}} {{item.month == 'current'&&nowYear==currentYear&&currentMonth==nowMonth&&item.date==nowDate?'isToday':''}} {{item.month=='current'&&item.currentYear==selectionDate.year&&item.currentMonth==selectionDate.month&&item.date==selectionDate.day?'isSelection':''}}"
\>{{item.date}}</view\>
</view  \>
</view\>
</view\>

• calendar.wxss

/\* suiyutong \*/

.tab\_bar,.tab\_item,.function\_tab,.function\_item{

display:  flex;

align-items:  center;

}

  

/\* tab \*/

.tab\_bar,.function\_tab{

z-index:  3;

position:  relative;

background:  #fff;

}

.tab\_bar {

display:  flex;

align-items:  center;

justify-content:  space-around;

padding:  20rpx  0  20rpx;

}

  

.tab\_item {

padding-bottom:  0;

height:40rpx;

font-size:  28rpx;

font-family:  PingFangSC-Medium, PingFang  SC;

font-weight:  600;

color:  rgba(2, 2, 2, 0.5);

flex-direction:  column;

line-height:  40rpx;

position:  relative;

}

  

.tab\_item::after, .select::after {

content:  '';

display:  inline-block;

position:  absolute;

bottom:  \-19rpx;

width:  47rpx;

height:  6rpx;

background:  #fff;

border-radius:  1rpx;

}

  

.select {

font-weight:  600;

color:  rgba(2, 2, 2, 0.85);

text-shadow:  0px  1rpx  3rpx  rgba(0, 0, 0, 0.5);

flex-direction:  column;

}

  

.select::after {

background:  rgba(64, 86, 255, 1);

}

/\* function tab \*/

.function\_tab{

height:81rpx;

justify-content:  space-around;

position:  relative;

}

.function\_tab::after,.function\_tab::before{

content:  '';

display:  inline-block;

height:  1px;

background:  #EBEBF5;

position:  absolute;

left:  0;

right:  0;

}

.function\_tab::before{

top:  0;

}

.function\_tab::after{

bottom:  0;

}

.function\_item{

width:297rpx;

height:98%;

font-size:24rpx;

font-family:PingFangSC-Regular,PingFang  SC;

font-weight:400;

color:rgba(2,2,2,0.75);

justify-content:  center;

position:  relative;

}

.function\_item::after{

content:'';

display:  inline-block;

width:  1px;

height:  24rpx;

background:  rgba(0, 0, 0, 0.1);

position:  absolute;

right:  0;

}

.function\_select{

color:  #4056FF;

}

.function\_screen{

width:178rpx;

}

.function\_screen::after{

width:  0rpx;

}

.function\_item  image{

width:  14rpx;

height:  14rpx;

margin-left:  15rpx;

}

.function\_screen  image{

width:  19rpx;

height:  19rpx;

}

  

/\* 新增 \*/

.add{

width:  120rpx;

height:  120rpx;

position:  fixed;

bottom:  154rpx;

right:  calc(50% - 60rpx);

border-radius:  50%;

z-index:  1;

  

}

.add  image{

width:  100%;

height:  100%;

}

• calendar.js

// ---suiyutong---

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()

},

hiddenModel: { // 当日归属的日

type: Boolean,

value:false

},

},

  

/\*\*

\* 组件的初始数据

\*/

data: {

currentMonthDateLen: 0, // 当月天数

preMonthDateLen: 0, // 当月中，上月多余天数

allArr: \[\], //

selectionDate:{

year: new  Date().getFullYear(),

month: new  Date().getMonth() + 1,

day: new  Date().getDate()

},

},

ready() {

this.getAllArr()

},

pageLifetimes: {

// 组件所在页面的生命周期函数

show: function () {

this.getAllArr('getNowData')

},

},

/\*\*

\* 组件的方法列表

\*/

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', // 只是为了增加标识，区分上下月

currentYear: this.data.currentYear,

currentMonth: this.data.currentMonth,

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', // 只是为了增加标识，区分当、下月

currentYear: this.data.currentYear,

currentMonth: this.data.currentMonth,

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',// 只是为了增加标识，区分当、上月

currentYear: this.data.currentYear,

currentMonth: this.data.currentMonth,

date: i

})

}

}

return nextMonthDateArr

},

// 整合当月所有数据

getAllArr(eventSource) {

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,

selectionDate: this.data.selectionDate

}

//选择日期时触发 点击上、下月不触发

if (eventSource==='getNowData'){

this.triggerEvent('sendObj', sendObj)

}

},

// 点击 上月

gotoPreMonth() {

let { year, month } = this.preMonth(this.data.currentYear, this.data.currentMonth)

this.setData({

currentYear: year,

currentMonth: month

})

this.getAllArr('gotoPreMonth')

},

// 点击 下月

gotoNextMonth() {

let { year, month } = this.nextMonth(this.data.currentYear, this.data.currentMonth)

this.setData({

currentYear: year,

currentMonth: month

})

this.getAllArr('gotoNextMonth')

},

getNowData(e) {

var data = e.currentTarget.dataset.item;

var currency = e.currentTarget.dataset.currency;

if (currency == 1) {

this.setData({

selectionDate: {

year: data.currentYear,

month: data.currentMonth,

day: data.date

}

})

}

this.getAllArr('getNowData')

  
  

},

//关闭组件

onClose(){

console.log('关闭')

this.triggerEvent('onclose',false)
}
}
})

• util.js

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

}

• 在页面中引入就ok了

//wxml
<!-- 日历组件 -->
<view  hidden\='{{!isCalendarShow}}'>
<!-- <calendar currentYear='2018' currentMonth="8" nowYear="2018" nowMonth="8" nowDate="2" bindsendObj='getCalendarData'></calendar> -->
<calendar  bindsendObj\='getCalendarData'  bindonclose\='showCalendar'></calendar\>
</view\>

//json
{
"usingComponents": {
"calendar": "/appointment\_manage/component/calendar/calendar",
},
"navigationBarTitleText": ""
}

//js
// suiyutong

Page({
/\*\*
\* 页面的初始数据
\*/
data: {
// 日历
isCalendarShow:false,
calendar:'',
},
onLoad: function (options) {
},
onShow: function () {
},

// 监听日历数据

getCalendarData(e) {

console.log(e.detail)

let month = e.detail.selectionDate.month < 10 ? '0' + e.detail.selectionDate.month : e.detail.selectionDate.month;

let day = e.detail.selectionDate.day < 10 ? '0' + e.detail.selectionDate.day : e.detail.selectionDate.day;

let calendarDate = e.detail.selectionDate.year + '/' + month + '/' + day;

this.setData({

isCalendarShow: false,

calendar: calendarDate

})

//获取数据

},
//显示、关闭日历
showCalendar(e){
//e.detail==false 日历组件触发的
if (e.detail==false){
this.setData({
isCalendarShow: false
})
}else{
this.setData({
isCalendarShow: !this.data.isCalendarShow,
})
}
},

})

没有啦...哪里写的不对欢迎指教.....