图片:

讯享网

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() { }, })