普通的横向切换日历

极简横向切换日历.png

<view class="w100" id="date">
  <view class="hDiv w100" id="dateTitle">
    <text class="cancelText" bindtap="cancelDate">取消</text>
    <text class="dateTitleText">日历</text>
    <text class="confirmText" bindtap="confirmDate">确定</text>
  </view>
  <view class="year_month_day w100 hDiv">
    <van-icon name="arrow-left" bindtap="lastMonth"/>
    <text class="year_month_day_text">{{year}}年{{month}}月</text>
    <van-icon name="arrow" bindtap="nextMonth"/>
  </view>
  <view class="week w100 hDiv">
    <text 
      wx:for="{{weeks_ch}}"
      wx:key="{{index}}"
      class="commonWeekText"
    >{{item}}</text>
  </view>
  <view class="divider"></view>
  <view class="dateConten hDiv w100">
    <!-- 占位的view -->
    <view 
      class="nbspDateBox"
      wx:for="{{nbspLength}}"
      wx:key="{{index}}"
    >
      <text class="nbspDate commonDateText"></text>
    </view>
    <!-- 本月的日期渲染view -->
    <view 
      class="realDateBox" 
      wx:for="{{allDay}}" 
      wx:key="{{index}}"
    >
      <text
      class="realDateText commonDateText"
      bindtap="chooseThisDay"
    >{{index+1}}</text>
    </view>
  </view>
</view>

wxss

#date{
  background: #fff;
  padding:20rpx 0;
}
#dateTitle{
  padding: 0 20rpx;
}
.cancelText{
  font-size:30rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(46,96,208,1);
}
.confirmText{
  font-size:30rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(46,96,208,1);
}
.dateTitleText{
  flex: 1;
  font-size:30rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(34,34,34,1);
  text-align: center;
}
.year_month_day{
  padding: 0 20rpx;
  margin-top: 20rpx;
}
.year_month_day_text{
  flex: 1;
  text-align: center;
  font-size:30rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(34,34,34,1);
}
.week{
  margin-top: 20rpx;
}
.commonWeekText{
  flex: 1;
  font-size:26rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(34,34,34,1);
  text-align: center;
}
.divider{
  width: 100%;
  height: 1px;
  background: #eee;
  margin-top: 20rpx;
}
.dateConten{
  flex-wrap: wrap;
}
.realDateBox{
  width: 14.2%;
  height: 72rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}
.nbspDateBox{
  width: 14.2%;
  height: 72rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}
.commonDateText{
  width: 72rpx;
  text-align: center;
  height: 72rpx;
  line-height: 72rpx;
  font-size:26rpx;
  font-family:PingFang SC;
  font-weight:500;
  border-radius: 50%;
}

js

data:{
    date: new Date(),
    year:new Date().getFullYear(),
    month: new Date().getMonth() + 1,
    day: new Date().getDate(),
    weeks_ch:['日', '一', '二', '三', '四', '五', '六'],
},
onReady() {
    let year = this.data.year;
    let month = this.data.month;
    let day = this.data.day;
    this.showday();
  },
showday(){
    //显示相应月份的天数
    this.count();
    let fistDate = new Date(this.data.year, this.data.month - 1, 1);
    let xingqi = fistDate.getDay();
    //渲染几个空白
    this.setData({
      nbspLength:xingqi,
    })
    //渲染有多少天出来
  },
count(){
    let month=this.data.month;
    let allDay = this.data.allDay;
    let year=this.data.year;
    if (month != 2) {
      if (month == 4 || month == 6 || month == 9 || month == 11){
        //判断是否是相同天数的几个月，二月除外
        this.setData({
          allDay: 30
        })
      }else{
        this.setData({
          allDay: 31
        })
      }
    }else{
      if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)){
        //判断是否是闰年，进行相应的改变
        this.setData({
          allDay: 29
        })
      }else{
        this.setData({
          allDay: 28
        })
      }
    }
  },
 lastMonth(){
    //上个月的操作逻辑
    if (this.data.month>1) {
      this.setData({
        month: this.data.month-1
      })
    } else {
      this.setData({
        month: 12,
        year: this.data.year-1,
      })
    }
    this.showday();
  },
  nextMonth(){
    //下个月的操作逻辑
    if (this.data.month < 12) {
      this.setData({
        month: this.data.month+1
      })
    }else {
      this.setData({
        month:1,
        year:this.data.year+1,
      })
    }
    this.showday();
  },

其中含有vant标签的均是使用的vant小程序框架