小程序 日历

 

 

 

 

 

wxml

<view class="content">

<!--年月选择 -->

<view class="preAndNext" wx:if="{{showMonthAndWeek}}">

<view class="jt" data-currentYear="{{currentYear}}" data-currentMonth="{{currentMonth}}" catchtap="toPreMonth">{{'<'}}</view>

<view catchtap="choose">{{currentYear}}-{{currentMonth}}</view>

<view class="jt" data-currentYear="{{currentYear}}" data-currentMonth="{{currentMonth}}" catchtap="toNextMonth">{{'>'}}</view>

</view>

<view class="monthAndWeekBox">

<!-- 显示周、天 -->

<view class="monthAndWeek" wx:if="{{showMonthAndWeek}}">

<view class="weekBox">

<block wx:for="{{weekArr}}" wx:key="index">

<view class="itemBox">{{item.name}}</view>

</block>

</view>

 

<view class="monthBox">

<block wx:for="{{showMonth}}" wx:key="index">

<view class="itemBox {{item.date==nowDate&&currentMonth==nowMonth&&currentYear==nowYear?'nowDate':''}} {{item.month!='current'?'noCurrent':''}}">{{item.date}}</view>

</block>

</view>

</view>

 

<!-- 显示月 -->

<view class="showMonthBox" wx:if="{{showMonthArr}}">

<view class="preAndNext">

<view class="jt" data-currentYear="{{currentYear}}" catchtap="toPreYear">{{'<'}}</view>

<view catchtap="chooseYear">{{currentYear}}</view>

<view class="jt" data-currentYear="{{currentYear}}" catchtap="toNextYear">{{'>'}}</view>

</view>

<view class="showMonth">

<block wx:for="{{monthArr}}" wx:key="index">

<view class="month {{item.name==currentMonth+'月'?'currentMonth':''}}" data-choosemonth="{{item.name}}" catchtap="chooseMonth">{{item.name}}</view>

</block>

</view>

</view>

 

<!--显示年 -->

<view class="showYearBox" wx:if="{{showYearArr}}">

<view class="preAndNext">

<view>{{currentYear}}</view>

</view>

<scroll-view scroll-y scroll-with-animation scroll-into-view="currentMonth" class="showYearitemBox">

<view class="showYear">

<block wx:for="{{allYear}}" wx:key="index">

<view id="{{item==currentYear?'currentMonth':''}}" class="month {{item==currentYear?'currentMonth':''}}" data-chooseyear="{{item}}" catchtap="chooseYearItem">{{item}}</view>

</block>

</view>

</scroll-view>

</view>

 

</view>

</view>

 

css

 

.preAndNext{

display: flex;

width: 100%;

justify-content: center;

background: #000;

border-radius: 10rpx;

margin: 20rpx 0;

padding: 20rpx;

box-sizing: border-box;

color: #fff;

}

.jt{

padding: 0 30rpx;

}

.monthAndWeekBox{

width: 100%;

background: #000;

border-radius: 10rpx;

padding: 20rpx;

box-sizing: border-box;

}

.monthAndWeek{

width: 100%;

background: #fff;

border-radius: 10rpx;

}

.itemBox{

width: 14%;

text-align: center;

padding: 10rpx;

margin: 2rpx 0;

box-sizing: border-box;

}

.weekBox{

display: flex;

justify-content: space-around;

}

 

.monthBox{

display: flex;

justify-content: space-around;

flex-wrap: wrap;

}

.nowDate{

background: #FF671D;

color: #fff;

border-radius: 50rpx;

}

.noCurrent{

background: #efefef;

}

 

.showMonthBox{

width: 100%;

}

.itemYear{

width: 100%;

padding: 10rpx 0;

text-align: center;

}

.showMonth{

width: 100%;

background: #fff;

border-radius: 10rpx;

display: flex;

flex-wrap: wrap;

justify-content: space-around;

}

.month{

width: 25%;

padding: 50rpx 0;

text-align: center;

}

.currentMonth{

background: #3396FB;

border-radius: 10rpx;

color: #fff;

}

.showYearitemBox{

width: 100%;

height: 590rpx;

background: #fff;

border-radius: 10rpx;

}

.showYear{

width: 100%;

display: flex;

flex-wrap: wrap;

 

}

 

 

js

Page({

 

/**

* 页面的初始数据

*/

data: {

showMonth:[],

weekArr: [

{ name: '一', id: 'Mon' },

{ name: '二', id: 'Tue' },

{ name: '三', id: 'Wed' },

{ name: '四', id: 'Thu' },

{ name: '五', id: 'Fri' },

{ name: '六', id: 'Sat' },

{name:'日',id:'Sun'}

],

showMonthAndWeek:true,

showMonthArr:false,

showYearArr:false,

monthArr:[

{ name: '1月', id: 'Jan' },

{ name: '2月', id: 'Feb' },

{ name: '3月', id: 'Mar' },

{ name: '4月', id: 'Apr' },

{ name: '5月', id: 'May' },

{ name: '6月', id: 'Jun' },

{ name: '7月', id: 'Jul' },

{ name: '8月', id: 'Aug' },

{ name: '9月', id: 'Sept' },

{ name: '10月', id: 'Oct' },

{ name: '11月', id: 'Nov' },

{ name: '12月', id: 'Dec' },

]

},

 

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

let nowTime=new Date()

let currentYear=nowTime.getFullYear()

let currentMonth=nowTime.getMonth()+1

let nowDate = nowTime.getDate()

 

let minYear = currentYear - 100

let maxYear = currentYear + 100

let allYear=[]

for(let i=minYear;i<=maxYear;i++){//计算当前年的前后100年的数组

allYear.push(i)

}

this.setData({

allYear: allYear,

currentYear: currentYear,

currentMonth: currentMonth,

nowDate: nowDate,//当前日

nowMonth: currentMonth,//当前月

nowYear: currentYear,//当前年

})

 

// console.log('有几天', this.getDateLen(this.data.currentYear, this.data.currentMonth))

// console.log('周几', this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth))

// console.log('当月数据', this.getCurrentArr())

// console.log('上月', this.preMonth(this.data.currentYear, this.data.currentMonth))

// console.log('上月剩余', this.getPreArr())

// console.log('下月', this.nextMonth(this.data.currentYear, this.data.currentMonth))

// console.log('下月剩余', this.getNextArr())

let getPreArr = this.getPreArr()//上月剩余

let getCurrentArr = this.getCurrentArr()//当月数据

let getNextArr = this.getNextArr()//下月剩余

let showMonth = this.data.showMonth//展示数据

showMonth=showMonth.concat(getPreArr)

showMonth = showMonth.concat(getCurrentArr)

showMonth = showMonth.concat(getNextArr)

this.setData({

showMonth: showMonth

})

},

 

getDateLen(year,month){//获得某年某月总共多少天

let actualMonth=month-1;

let timeDistance = + new Date(year, month) - + new Date(year, actualMonth);

return timeDistance / (1000*60*60*24)

 

},

 

getFirstDateWeek(year,month){//获取某月1号是周几

let week = new Date(year, month - 1, 1).getDay()

if (week==0){

week=7

}

return week

},

 

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

},

 

preMonth(year,month){//上月 年、月

if(month==1){

return{

year:--year,

month:12

}

}else{

return{

year:year,

month:--month

}

}

},

 

getPreArr() {// 获取当月中，上月多余数据，返回数组

let preMonthDateLen = (this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth))-1 // 当月1号是周几-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

},

 

nextMonth(year, month) { // 下月 年、月

if (month == 12) {

return {

year: ++year,

month: 1

}

} else {

return {

year: year,

month: ++month

}

}

},

 

getNextArr() {// 获取当月中，下月多余数据，返回数组

let nextMonthDateLen = 42 - 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

},

 

toPreMonth(e){//点击上一月

let currentyear = e.currentTarget.dataset.currentyear

let currentmonth = e.currentTarget.dataset.currentmonth

let timer = this.preMonth(currentyear, currentmonth)

this.setData({

currentYear: timer.year,

currentMonth:timer.month,

showMonth:[]

})

 

let getPreArr = this.getPreArr()//上月剩余

let getCurrentArr = this.getCurrentArr()//当月数据

let getNextArr = this.getNextArr()//下月剩余

let showMonth = this.data.showMonth//展示数据

showMonth = showMonth.concat(getPreArr)

showMonth = showMonth.concat(getCurrentArr)

showMonth = showMonth.concat(getNextArr)

this.setData({

showMonth: showMonth

})

},

 

toNextMonth(e){//点击下一月

let currentyear = e.currentTarget.dataset.currentyear

let currentmonth = e.currentTarget.dataset.currentmonth

let timer = this.nextMonth(currentyear, currentmonth)

this.setData({

currentYear: timer.year,

currentMonth: timer.month,

showMonth:[]

})

 

let getPreArr = this.getPreArr()//上月剩余

let getCurrentArr = this.getCurrentArr()//当月数据

let getNextArr = this.getNextArr()//下月剩余

let showMonth = this.data.showMonth//展示数据

showMonth = showMonth.concat(getPreArr)

showMonth = showMonth.concat(getCurrentArr)

showMonth = showMonth.concat(getNextArr)

this.setData({

showMonth: showMonth

})

},

 

choose(){//选择年月

this.setData({

showMonthAndWeek:false,//隐藏周月

showMonthArr:true,//显示月

})

},

 

chooseMonth(e){//选择月份后

let choosemonth = e.currentTarget.dataset.choosemonth

choosemonth = choosemonth.substring(0,(choosemonth.indexOf('月')))

 

this.setData({

currentMonth: choosemonth,

showMonthAndWeek: true,//显示周月

showMonthArr: false,//，隐藏月

showMonth:[]

})

 

let getPreArr = this.getPreArr()//上月剩余

let getCurrentArr = this.getCurrentArr()//当月数据

let getNextArr = this.getNextArr()//下月剩余

let showMonth = this.data.showMonth//展示数据

showMonth = showMonth.concat(getPreArr)

showMonth = showMonth.concat(getCurrentArr)

showMonth = showMonth.concat(getNextArr)

this.setData({

showMonth: showMonth

})

},

 

toPreYear(e){//上一年

let currentyear = e.currentTarget.dataset.currentyear

let nowYear = this.data.nowYear//当前年份

currentyear = --currentyear

if (currentyear <= nowYear-100){//小于100年以前

wx.showToast({

title: '无更多数据',

icon:'none'

})

return

}

this.setData({

currentYear: currentyear,

})

},

 

toNextYear(e) {//上一年

let currentyear = e.currentTarget.dataset.currentyear

currentyear = ++currentyear

if (currentyear >= nowYear + 100) {//大于100年以后

wx.showToast({

title: '无更多数据',

icon: 'none'

})

return

}

this.setData({

currentYear: currentyear,

})

},

 

chooseYear(){//选择年

this.setData({

showMonthAndWeek: false,//隐藏周月

showMonthArr: false,//隐藏月

showYearArr:true,//显示年

})

},

 

chooseYearItem(e){//选择年后

let chooseyear = e.currentTarget.dataset.chooseyear

this.setData({

currentYear: chooseyear,

showMonthAndWeek: false,//隐藏周月

showMonthArr: true,//显示月

showYearArr: false,//隐藏年

})

 

}

 

})