微信小程序之实现常用日期格式-日历格式（二）

前言概述

本文介绍项目中常用到的日期格式--日历（总是显示一个月有效期选择），该实例分显示页面和日期组件页面两个页面：

实现过程

一、日期组件页面

1. 先实现页面效果，文件*.wxml和*.wxss代码如下：

1）需求只需要显示每个月自己的日期，由于该算法也显示了非自己月份的日期，所以需要过滤掉非当月的日期，在wxml使用wx:if="{{item.year === lists.dateYear && item.month === lists.dateMonth}}"；

2）item.isDisable ? 'opacity30' : (item.year === selectDay.year && item.month === selectDay.month && item.day === selectDay.day?'select':'')实现原理，判断是否有效期（isDisable ），非有效期增加'opacity30'实现透明度30%效果；而有效期判断是否被选中，选中则增加'select'实现高亮效果；

<view class="calendar"><!-- 日历头部 --><view class="calendar-week"><view class="view">日</view><view class="view">一</view><view class="view">二</view><view class="view">三</view><view class="view">四</view><view class="view">五</view><view class="view">六</view></view><view wx:for="{{dateList}}" wx:for-item="lists" wx:key="dateList" class="day-box"><!-- 年月份信息 --><view class="title"><view>{{lists.dateYear}}年{{lists.dateMonth>9?lists.dateMonth:"0"+lists.dateMonth}}月</view></view><!-- 日历主体 --><view class="calendar-main"><view wx:for="{{lists.list}}" wx:key="index" class="day"><view wx:if="{{item.year === lists.dateYear && item.month === lists.dateMonth}}" class="day-item {{item.isDisable ? 'opacity30' : (item.year === selectDay.year && item.month === selectDay.month && item.day === selectDay.day?'select':'')}}" catchtap="selectChange" data-day="{{item.day}}" data-year="{{item.year}}" data-month="{{item.month}}" data-date-string="{{item.dateString}}" data-week-day="{{item.weekDay}}" data-isdisable="{{item.isDisable}}"><view class="text {{item.isWeekend ? 'orange' : (item.isToday ? 'blue' : '')}}">{{item.day}}</view><view class="remark blue" wx:if="{{item.isToday}}">今天</view><view class="remark orange" wx:if="{{item.isWeekend}}">休</view></view></view></view></view>
</view>

.calendar .title {font-weight: bold;text-align: center;padding: 20rpx 0 0;
}.calendar .calendar-week {display: flex;line-height: 50rpx;height: 50rpx;color: #808080;background-color: #F3F6F8;padding: 0 25rpx;
}.calendar .calendar-week .view {width: 100rpx;text-align: center;
}.calendar .calendar-main {padding: 10rpx 25rpx 0;display: flex;flex-wrap: wrap;
}.calendar .calendar-main .day {width: 100rpx;text-align: center;height: 100rpx;position: relative;
}.calendar .calendar-main .day .day-item {height: 70rpx;padding-top: 30rpx;
}.calendar .calendar-main .day .other-month {color: #ccc;display: none;
}.calendar .calendar-main .day .remark {font-size: 20rpx;
}.calendar .calendar-main .day .blue {color: #3D7AF5;
}.calendar .calendar-main .day .orange {color: #FA7014;
}.calendar .calendar-main .day .opacity30 {opacity: 0.3;
}.calendar .calendar-main .day .select {background-color: #3D7AF5;border-radius: 8rpx;
}.calendar .calendar-main .day .select .text {color: #fff;
}.calendar .calendar-main .day .select .remark {color: #fff;
}

2. 接下来实现交互逻辑，文件*.js代码实现如下：

1）dateInit函数用于获取渲染的日历主体信息和所需要的data各种数据；

2）onLoad实现获取当天日期并渲染主体数据，加了判断是否选中过日期来变化高亮日期天数；

3）selectChange函数用于点击后把选中日期数据传回上一页，并跳转到上一页。

import util from '../../utils/util.js'
Page({/*** 页面的初始数据*/data: {dateList: [], // 日历主体渲染数组nowDay: {}, // 今天日期selectDay: {}, // 选中时间},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 获取当前日期信息let now = new Date();let nowDay = {year: now.getFullYear(),month: now.getMonth() + 1,day: now.getDate()}let selectDay = nowDay;// 存在选择数据情况if (options.selectDay != 0) {selectDay = JSON.parse(options.selectDay);}this.setData({nowDay,selectDay});this.dateInit(nowDay.year, nowDay.month);},// 日历主体的渲染方法dateInit(setYear, setMonth) {let dateList = []; // 需要遍历的日历数组数据// 循环两个月数据（2）for (let i = 0; i < 2; i++) {let now = new Date(setYear, setMonth - 1 + i); // 当前月份的1号let startWeek = now.getDay(); // 目标月1号对应的星期let dayNum = new Date(setYear, setMonth + i, 0).getDate(); // 当前月有多少天let forNum = Math.ceil((startWeek + dayNum) / 7) * 7; // 当前月跨越的周数let dateObj = {};let list = [];for (let j = 0; j < forNum; j++) {const now2 = new Date(now);now2.setDate(j - startWeek + 1);let obj = {};let day = now2.getDate();let month = now2.getMonth() + 1;let year = now2.getFullYear();let weekDay = now2.getDay();let nowDay = this.data.nowDay;let isDisable;// 用于判断本月小于今天，下个月大于今天的日期不能选择if (month == nowDay.month) {isDisable = (day < nowDay.day) ? true : false;} else {isDisable = (day >= nowDay.day) ? true : false;}obj = {day,month,year,weekDay,dateString: util.formatTime(now2),isToday: (year === nowDay.year && month === nowDay.month && day === nowDay.day) ? true : false, // 是否今天isWeekend: (weekDay === 0 || weekDay === 6) ? true : false, // 是否周末isDisable};list[j] = obj;}dateObj = {dateYear: now.getFullYear(),dateMonth: now.getMonth() + 1,list: list}dateList.push(dateObj);}this.setData({dateList: dateList})},// 一天被点击时selectChange(e) {const weekDay = e.currentTarget.dataset.weekDay;const isDisable = e.currentTarget.dataset.isdisable;// 非有效期不能预约if (isDisable) {util.showToast('请选择有效期', 'none');return false;}// 周末不能预约if (weekDay === 0 || weekDay === 6) {util.showToast('请选择非休息日', 'none');return false;}// 获取星期几let weeks = util.getWeeks(weekDay);const year = e.currentTarget.dataset.yearconst month = e.currentTarget.dataset.monthconst day = e.currentTarget.dataset.dayconst dateString = e.currentTarget.dataset.dateStringconst selectDay = {year: year,month: month,day: day,dateString: dateString + ' ' + weeks}console.log(selectDay);this.setData({selectDay: selectDay});// 传数据到上一个页面let pages = getCurrentPages(); // 获取当前所有页面let prevPage = pages[pages.length - 2]; // 获取上一个页面并传参prevPage.setData({selectDay});wx.navigateBack({delta: 1, // 返回上一级页面})}
})

二、显示页面

1. 先实现页面效果，文件*.wxml和*.wxss代码如下：

<view class="time-box"><view class="time-title">预约日期</view><view class="picker" bindtap="selectDate"><text>{{selectDay.dateString ? selectDay.dateString : dateString}}</text></view>
</view>

.time-box {padding: 32rpx 30rpx;display: flex;background-color: #fff;
}.time-box .time-title {color: #9A9A9A;margin-right: 73rpx;width: 200rpx;
}.time-box .picker {width: 400rpx;
}

2. 接下来实现交互逻辑，文件*.js代码实现如下：

Page({/*** 页面的初始数据*/data: {dateString: '2020-09-03 星期四'},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},// 选择日期selectDate: function() {wx.navigateTo({url: '../calendarModule/calendarModule?selectDay=' + JSON.stringify(this.data.selectDay ? this.data.selectDay : 0)})}
})