作品展示
总结技巧
new Date(year, month, day, hours, minutes, seconds, milliseconds);
使用此来获取月前，月后的日期
代码分享
wxml
<!--pages/calendar/calendar.wxml--><view class="calendar"> <view class="head"> <view class="left"> <picker mode="date" fields="month" value="{{choosedate}}" bindchange="bindDateChange"> <view class="picker"> <view class="year">{{year}}年</view> <view class="month"> <view>{{month}}月</view> <image src="{{imgurl}}/zk.png"></image> </view> </view> </picker> </view> <view class="right"> 今天{{nowDate}} </view> </view> <view class='display-space-between'> <view></view> <!-- <view>{{calendarTitle}}</view> --> <view></view></view><!-- bindtap='clickDate' --><view class='calendar-background display-space-between'> <view class='calendar-item week' wx:for-items="{{weeks}}" wx:for-item="item" wx:key="*item">{{item}}</view> <view class='calendar-item {{item.current ? "":"text-gray"}}' wx:for-items="{{calendarDays}}" wx:for-item="item" wx:key="*item" wx:for-index="index" data-index='{{index}}' > <view wx:if="{{item.nowday}}" class="nowday item"> {{item.date}}</view> <view class="item" wx:else> {{item.date}}</view> <view class="is {{item.selected?'select':''}}"> </view> </view></view></view>
js
Page({ /** * 页面的初始数据 */ data: { chooseDate: '', year: new Date().getFullYear(), month: new Date().getMonth() + 1, imgurl: img, nowDate: new Date().getMonth()+1+'月'+new Date().getDate()+'日', weeks: ["日", "一", "二", "三", "四", "五", "六"], // 所选择日期 selectDate: { 'year': new Date().getFullYear(), 'month': new Date().getMonth() + 1, 'date': new Date().getDate(), }, calendarTitle: '', // 日期list calendarDays: [], //有课列表 selectlist: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ chooseDate: this.getDayDate(new Date()) }) this.getMonthDaysCurrent(new Date()) this.getlist() }, // 选择日期 bindDateChange(event) { let day = event.detail.value this.setData({ chooseDate: event.detail.value, month: day.split('-')[1], year: day.split('-')[0] }) this.getMonthDaysCurrent(new Date(day)) this.getlist() }, // 所选时间对应月份日期 getMonthDaysCurrent(e) { let year = e.getFullYear() let month = e.getMonth() + 1 let date = e.getDate() let day = e.getDay() // 周几 let days = new Date(year, month, 0).getDate() //当月天数(即下个月0号=当月最后一天) let firstDayDate = new Date(year, month - 1, 1) // 当月1号 let firstDay = firstDayDate.getDay() //当月1号对应的星期 let lastDate = new Date(year, month - 1, days) //当月最后一天日期 let lastDay = lastDate.getDay() //当月最后一天对应的星期 let nowDateY = new Date().getFullYear() let nowDateM = new Date().getMonth()+1 let nowDateD = new Date().getDate() // 更新选择日期 this.data.selectDate = { 'year': year, 'month': month, 'date': date, } // 更新顶部显示日期 this.setData({ calendarTitle: year + "/" + (month > 9 ? month : "0" + month) + "/" + (date > 9 ? date : "0" + date) }) let calendarDays = [] // 上个月显示的天数及日期 for (let i = firstDay - 1; i >= 0; i--) { let date = new Date(year, month - 1, -i) //console.log(date, date.getMonth() + 1) calendarDays.push({ 'year': date.getFullYear(), 'month': date.getMonth() + 1, 'date': date.getDate(), 'day': date.getDay(), 'current': false, 'nowday': false, 'selected': false }) } // 当月显示的日期 for (let i = 1; i <= days; i++) { calendarDays.push({ 'year': year, 'month': month, 'date': i, 'day': new Date(year, month - 1, i).getDay(), 'current': true, 'nowday': nowDateY==year&&nowDateM==month&&nowDateD==i?true:false, 'selected': false // 判断当前日期 }) } // 下个月显示的天数及日期 for (let i = 1; i < 7 - lastDay; i++) { let date = new Date(year, month, i) //console.log(date, date.getMonth() + 1) calendarDays.push({ 'year': date.getFullYear(), 'month': date.getMonth() + 1, 'date': date.getDate(), 'day': date.getDay(), 'nowday': false, 'current': false, 'selected': false }) } this.setData({ calendarDays: calendarDays }) },// 获取这个月,对特定日期进行处理 getlist() { request_get(monthList,{child:0,month: this.data.month,year: this.data.year}) .then(res=>{ if(res.data.success) { let list = res.data.data; let arrlist = [] list.forEach((item)=>{ let arr = item.split('-') // console.log(arr) let obj = { year: arr[0], month: arr[1][0]=='0'?arr[1][1]:arr[1], date: arr[2][0]=='0'?arr[2][1]:arr[2] } arrlist.push(obj) }) this.data.calendarDays.forEach(item=>{ arrlist.forEach(aitem=>{ if(item.date==aitem.date){ if(item.month==aitem.month){ item.selected = true } } }) }) this.setData({ calendarDays: this.data.calendarDays, }) } }) }, // 判断是否为空 validatenull(val) { if (typeof val === "boolean") { return false; } if (val instanceof Array) { if (val.length === 0) return true; } else if (val instanceof Object) { if (JSON.stringify(val) === "{}") return true; } else { if ( val === "null" || val == null || val === "undefined" || val === undefined || val === "" ) return true; } return false; }, // 日期转换 getDayDate(dbl) { if (this.validatenull(dbl)) { return; } let date = new Date(dbl - 0); let Y = date.getFullYear() + "-"; let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1); // let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "; return Y + M; }, })
WXSS
/* pages/calendar/calendar.wxss */.head { display: flex; padding: 25rpx 32rpx; justify-content: space-between; align-items: center;}.head .left { font-size: 30rpx; color: #95A4B5;}.right { font-size: 30rpx; color: #333959;}.month { font-size: 56rpx; color: #333959; display: flex; align-items: center;}.year { margin-bottom: 24rpx;}.month image { width: 20rpx; margin-left: 15rpx; height: 12rpx;}.calendar-background { font-size: 24rpx; padding-top: 20rpx;}.calendar-item { width: 14%; height: 98rpx; font-size: 30rpx; color: #333959; display: flex; flex-direction: column; align-items: center; justify-content: center;}.calendar-item .is { width: 12rpx; height: 12rpx; background: #fff; border-radius: 50%; }.calendar-item .select { width: 12rpx; height: 12rpx; background: #FF4776; border-radius: 50%; }.calendar-item .item { width: 60rpx; height: 60rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10rpx;}.week { font-size: 26rpx; color: #333959;}.display-space-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}.text-gray { color: #878787;}.text-red { color: #F87474;}.nowday { background: #86BAFF; color: #fff;}
