最近项目中使用到了日历,在网上找了一些参考,自己改改,先看效果图
wxml
<view class="date"><image class="direction" src="/images/icon/left.png" bindtap='minusMouth'/><label>{{year}}年{{mouth}}月</label><image class="direction" src="/images/icon/right.png" bindtap='plusMouth' />
</view>
<view class="header"><block wx:for="{{weeks}}" wx:key="index"><text class="weeks-item-text">{{item}}</text></block>
</view><view class="body-days"><block wx:for="{{days}}" wx:key="index"><block wx:if="{{item !== nowDate }}"><view class="days-item" data-date='{{year}}-{{mouth}}-{{item}}' bindtap='selDate'><view class="days-item-text" wx:if="{{item>0}}">{{item}}</view></view></block><block wx:else><view class="days-item days-item-selected" data-date='{{year}}-{{mouth}}-{{item}}' bindtap='selDate'><view class="days-item-text" wx:if="{{item>0}}">{{item}}</view></view></block></block>
</view>
wxss
.date {display: flex;flex-direction: row;justify-content: center;line-height: 3em;align-items: center;
}.direction {width: 40rpx;margin: 15rpx;height: 40rpx;
}.header {display: flex;flex-direction: row;background: #5DD79C;color: #fff
}.weeks-item-text {width: 100%;line-height: 2em;font-size: 40rpx;text-align: center;border-left: 1px solid #ececec;}.body-days {display: flex;flex-direction: row;flex-wrap: wrap;text-align: center;
}.days-item {width: 14.285%;display: flex;justify-content: center;align-content: center;
}.days-item-text {width: 60rpx;padding: 26rpx;font-size: 26rpx;/* border-radius: 50%; */border: 1rpx solid #ececec;/* margin-top: 34rpx;margin-bottom: 34rpx; */color: #000;
}
/* 选中状态 */
.days-item-selected{background: #5DD79C
}
js
Page({/*** 页面的初始数据*/data: {date: [],weeks: ['日', '一', '二', '三', '四', '五', '六'],days: [],year: 0,mouth: 0,nowDate:''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let that = thisthat.dateData();var myDate = new Date();//获取系统当前时间var nowDate = myDate.getDate();that.setData({nowDate:nowDate})console.log(nowDate)},// 点击日期事件selDate:function(e){let that = this// 日期 年月日var seldate = e.currentTarget.dataset.date// 天var selday = e.currentTarget.dataset.dayconsole.log(seldate)that.setData({nowDate: selday})},//用户点击减少月份minusMouth: function () {var mouth;var year;mouth = this.data.mouthyear = this.data.yearmouth--if (mouth < 1) {mouth = 12year--}this.updateDays(year, mouth)},//用户点击增加月份plusMouth: function () {var mouth;var year;mouth = this.data.mouthyear = this.data.yearmouth if (mouth > 12) {mouth = 1year }this.updateDays(year, mouth)},dateData: function () {var date = new Date();var days = [];var year = date.getFullYear();var mouth = date.getMonth() 1;this.updateDays(year, mouth)},updateDays: function (year, mouth) {var days = [];var dateDay, dateWeek;// 根据日期获取每个月有多少天var getDateDay = function (year, mouth) {return new Date(year, mouth, 0).getDate();}//根据日期获取这天是周几var getDateWeek = function (year, mouth) {return new Date(year, mouth - 1, 1).getDay();}dateDay = getDateDay(year, mouth)dateWeek = getDateWeek(year, mouth)// console.log(dateDay);// console.log(dateWeek);//向数组中添加天for (let index = 1; index <= dateDay; index ) {days.push(index)}//向数组中添加,一号之前应该空出的空格for (let index = 1; index <= dateWeek; index ) {days.unshift(0)}this.setData({days: days,year: year,mouth: mouth,})}
})
更多专业前端知识,请上 【猿2048】www.mk2048.com