小程序日历表

页面

<view class='body'>
  <view class='time'>
    <image class='img rotate' src='http://wechat.espot.com.cn/gais/webResource1/staticResource/new/xiangyoujiantou.png?pfdrid_c=true' mode='aspectFill' bindtap='subMonth'></image>
    <view class='text' bindtap='show'>{{years[value[0]]+'-'+months[value[1]]}}</view>
    <image class='img' src='http://wechat.espot.com.cn/gais/webResource1/staticResource/new/xiangyoujiantou.png?pfdrid_c=true' mode='aspectFill' bindtap='addMonth'></image>
  </view>

  <view class='month'>
    <view class='week'>
      <block wx:for='{{weeks}}' wx:key='index'>
        <view class='temp'>{{item}}</view>
      </block>
    </view>
    <view class='days'>
      <block wx:for='{{daysList}}' wx:key='index'>
        <view class='temp day'>
          <view class='dayOn' wx:if='{{item!=null}}'>{{item}}</view>
        </view>
      </block>
    </view>
  </view>
</view>
<view class='mengban' wx:if='{{showType}}' bindtap='cancle'></view>
<view class='picker-father' wx:if='{{showType}}'>
  <view class='top'>
    <view class='text' bindtap='cancle'>取消</view>
    <view class='text' bindtap='sure'>确定</view>
  </view>
  <picker-view class='picker' value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view class='item' wx:for="{{years}}">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view class='item' wx:for="{{months}}">{{item}}月</view>
    </picker-view-column>
  </picker-view>
</view>

js

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    weeks: ['日', '一', '二', '三', '四', '五', '六'],
    days: initDate().days,
    daysList: initDate().daysList,
    years: initDate().years,
    months: initDate().months,
    value: initDate().value,
    showType: false, //是否显示下面的事件选择器
  },
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 取消选择
     */
    cancle: function(e) {
      this.setData({
        showType: false
      });
    },
    /**
     * 确认选择
     */
    sure: function(e) {
      this.setData({
        showType: false
      });
    },
    /**
     * 展示弹框
     */
    show: function(e) {
      this.setData({
        showType: true
      });
    },
    /**
     * 滑动更改
     */
    bindChange: function(e) {
      const value = e.detail.value;
      const changes = changeDays(this.data.years[value[0]], this.data.months[value[1]]);
      this.setData({
        value: value,
        days: changes.days,
        daysList: changes.daysList
      });
    },
    /**
     * 减月份
     */
    subMonth: function(e) {
      if (this.data.months[this.data.value[1]] == 1) {
        if (this.data.years[this.data.value[0]] == 1990) return;
        this.data.value[0] = this.data.value[0] - 1;
        this.data.value[1] = 11;
      } else {
        this.data.value[1] = this.data.value[1] - 1;
      }
      const changes = changeDays(this.data.years[this.data.value[0]], this.data.months[this.data.value[1]]);
      this.setData({
        value: [this.data.value[0], this.data.value[1], this.data.value[2]],
        days: changes.days,
        daysList: changes.daysList,
      });
    },
    /**
     * 加月份
     */
    addMonth: function(e) {
      if (this.data.months[this.data.value[1]] == 12) {
        if (this.data.years[this.data.value[0]] == 2500) return;
        this.data.value[0] = this.data.value[0] + 1;
        this.data.value[1] = 0;
      } else {
        this.data.value[1] = this.data.value[1] + 1;
      }
      const changes = changeDays(this.data.years[this.data.value[0]], this.data.months[this.data.value[1]]);
      this.setData({
        value: [this.data.value[0], this.data.value[1], this.data.value[2]],
        days: changes.days,
        daysList: changes.daysList,
      });
    }
  }
})
//是否是闰年
function is_leap(year) {
  return (year % 100 == 0 ? (year % 400 == 0 ? 1 : 0) : (year % 4 == 0 ? 1 : 0));
}


function initDate() {
  const date = new Date();
  const years = [];
  const months = [];
  const days = [];
  const value = [];
  const daysList = [];

  for (let i = 1990; i <= 2500; i++) {
    years.push(i);
  }

  for (let i = 1; i <= 12; i++) {
    months.push(i);
  }

  days.push(...changeDays(date.getFullYear(), date.getMonth() + 1).days);
  daysList.push(...changeDays(date.getFullYear(), date.getMonth() + 1).daysList);

  value[0] = date.getFullYear() - 1990;
  value[1] = date.getMonth();
  value[2] = date.getDate() - 1;

  return {
    years,
    months,
    days,
    daysList,
    value
  }
}
/**
 * 修改天数
 * @param {Number} month 月份
 */
function changeDays(year, month) {
  const days = [];
  const daysList = [];
  let leng = 31;
  switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
      leng = 31;
      break;
    case 4:
    case 6:
    case 9:
    case 11:
      leng = 30;
      break;
    case 2:
      leng = 28 + is_leap(year);

      break;
  }
  for (let i = 1; i <= leng; i++) {
    days.push(i);
  }
  let nweek = new Date(year, month - 1, 1).getDay(); //获取当月第一天是星期几
  for (let i = 0; i < nweek; i++) {
    daysList.push(null);
  }
  daysList.push(...days);
  return {
    days,
    daysList
  };
}

样式

.body {
  width: 750rpx;
  height: 1000rpx;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.body .time {
  width: 650rpx;
  height: 100rpx;
  padding: 35rpx 50rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10rpx;
  box-shadow: 2rpx 8rpx 2rpx #00000024;
}

.body .img {
  width: 16rpx;
  height: 28rpx;
}

.body .rotate {
  transform: rotate(180deg);
}

.body .text {
  font-size: 38rpx;
  line-height: 40rpx;
}

.month {
  width: 627rpx;
  height: 527rpx;
  margin: 50rpx;
}

.week {
  width: 100%;
  display: flex;
}

.days {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.temp {
  width: 14.28%;
  font-size: 34rpx;
  color: rgba(51, 51, 51, 1);
  line-height: 36rpx;
  display: flex;
  justify-content: center;
}

.days .day {
  margin-top: 40rpx;
}

.days .dayOn {
  width: 60rpx;
  height: 60rpx;
  color: #fff;
  background-color: rgba(51, 204, 118, 1);
  font-size: 34rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.picker-father {
  height: 500rpx;
  position: fixed;
  bottom: 0;
  background-color: #fff;
}

.picker-father .top {
  width: 750rpx;
  height: 100rpx;
  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f4f4f4;
}

.picker {
  width: 750rpx;
  height: 400rpx;
}

.picker .item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mengban{
  height: 100vh;
  width: 100vw;
  background-color: #00000024;
  position: fixed;
  top: 0;
}