图片:
wxml:
<!--pages/Date/ShowDate.wxml-->
<view class='container'>
<view class="calendar">
<view class="selectMonth">
<view class="goleft" bindtap="prevMonth" hover-class="currentSyle">
<image src='../content/selectMonth_Left.png' ></image>
</view>
<view class="date-wrap" style='width:300rpx; text-align:center;'>
{{year}} 年 {{month}} 月
</view>
<view class="goright" bindtap="nextMonth" hover-class="currentSyle">
<image src='../content/selectMonth_Right.png' ></image>
</view>
</view>
<view class='showDateInfo'>
<view class="week" class='dateWeekStyle'>
<view wx:for="{{weekArr}}" wx:for-index="index" wx:for-item="itemWeek" wx:key="key">{{itemWeek}}</view>
</view>
<view class="date" class='dateDayStyle'>
<block wx:for="{{dateArr}}" wx:for-index="indexDay" wx:for-item="itemDay" wx:key="key">
<view class="{{itemDay.isToDay?'nowDay':''}}" style="margin-left:{{indexDay==0?monthFitstDayWeek*60:0}}rpx">
<view catchtap='CurrentDay' data-currentDay="{{itemDay}}">{{itemDay.dateNum}}</view>
</view>
</block>
</view>
</view>
</view>
<view style='color:red'>选中的日期是:{{selectDate}}</view>
</view>
wxss:
/* pages/Date/ShowDate.wxss */
.calendar {
/* height: 622rpx; */
width: 450rpx;
background-color: #fff;
border-radius: 8rpx;
}
.selectMonth {
display: flex;
flex-direction: row;
font-size: 40rpx;
margin: 60rpx 0rpx 20rpx;
line-height: 60rpx;
}
.goleft, .goright {
height: 50rpx;
width: 50rpx;
margin: 5rpx 22rpx;
}
.goleft image, .goright image {
width: 50rpx;
height: 50rpx;
}
.showDateInfo {
width: 430rpx;
margin: 10rpx auto;
}
.dateWeekStyle, .dateDayStyle {
padding-left: 0rpx;
}
.dateWeekStyle >view {
display: inline-block;
width: 60rpx;
text-align: center;
}
.dateDayStyle>view {
display: inline-block;
width: 60rpx;
line-height: 60rpx;
text-align: center;
margin: 10rpx 0rpx 0rpx;
}
/* 日期选中状态 */
.nowDay {
background-color: #22a2fa;
border: 0rpx #22a2fa solid;
border-radius: 30rpx;
}
.currentSyle {
transform: scale(0.6, 0.6); /*缩放*/
}
js:
// pages/Date/ShowDate.js
Page({
/**
* 页面的初始数据
*/
data: {
year: '',
month: '',
day: '',
weekArr: ['日', '一', '二', '三', '四', '五', '六'],
dateArr: [],
firstDay: '',
lastDay: '',
monthFitstDayWeek: '',
selectDate:''
},
//获取当前日期
getDate: function() {
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth();
this.currentMonth(year, month, myDate.getDate());
},
//上一个月
prevMonth: function() {
var months = this.data.month - 1;
var years = this.data.year;
if (months == 0) {
years -= 1;
months = 11;
} else {
months -= 1;
}
this.currentMonth(years, months, this.data.day);
},
//下一个月
nextMonth: function() {
var year = this.data.year;
var nowMonth = this.data.month - 1;
if (nowMonth == 11) {
year += 1;
nowMonth = 0;
} else {
nowMonth += 1;
}
this.currentMonth(year, nowMonth, this.data.day);
},
//月份计算 year:要计算的年份,nowMonth:要计算的月份
currentMonth: function(year, month, day) {
//console.log(year + ' ' + month + ' ' + day);
//当月的第一天
var first = new Date(year, month, 1);
//this.data.firstDay = first.getDate();
//当月的最后一天
var last = new Date(year, month + 1, 0);
//this.data.lastDay = last.getDate;
this.setData({
year: year,
month: month + 1,
day: day,
firstDay: first.getDate(),
lastDay: last.getDate(),
monthFitstDayWeek: first.getDay()
});
this.data.dateArr = [];
for (var i = 1; i < this.data.lastDay + 1; i++) {
this.data.dateArr.push({
isToDay: i == day ? true : false,
dateNum: i
});
}
this.setData({
dateArr: this.data.dateArr
});
//选中的日期
var week = this.data.weekArr[(new Date(this.data.year, this.data.month - 1, this.data.day)).getDay()];
this.setData({
selectDate: this.data.year + '-' + this.data.month + '-' + this.data.day + ' 周' + week
});
},
//选中日期
CurrentDay: function(event) {
//console.log(event);
var ctDay = event.currentTarget.dataset.currentday.dateNum;
//console.log(ctDay);
var newArr = this.data.dateArr;
for (var i = 0; i < newArr.length; i++) {
newArr[i].isToDay = false;
if (i == ctDay - 1) {
newArr[i].isToDay = true;
}
}
this.setData({
dateArr: newArr
});
//选中的日期
var week = this.data.weekArr[(new Date(this.data.year, this.data.month - 1, ctDay)).getDay()];
this.setData({
selectDate: this.data.year + '-' + this.data.month + '-' + ctDay + ' 周' + week
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.getDate();
//this.setDate();
var res = wx.getSystemInfoSync();
// this.setData({
// param: res.windowHeight / 12
// });
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
})