自定义日历

自定义日历

话不多说 上代码
wxml

<view class="canlendarBgView">
  <view class="canlendarView">
    <view class="conent">选择日期</view>
    <view class="canlendarTopView">
      <view class="leftBgView" bindtap="handleCalendar" data-handle="prev">
        <view class="leftView"> </view>
      </view>
      <view class="centerView">{{cur_month || "--"}} 月</view>
      <view class="rightBgView" bindtap="handleCalendar" data-handle="next">
      </view>
    </view>
    <view class="weekBgView">
      <view class="weekView" wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
    </view>
    <view class="dateBgView">
      <view wx:if="{{hasEmptyGrid}}" class="dateEmptyView" wx:for="{{empytGrids}}" wx:key="{{index}}"
        data-idx="{{index}}">
      </view>
      <view class="dateView" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="dateSelectAction">
        <view class="datesView {{index == todayIndex ? 'dateSelectView' : ''}}">{{item}}</view>
      </view>
    </view>
  </view>
</view>

wxss
/* 日历 */

.canlendarBgView {
  width: 750rpx;
  height: 526rpx;
  background: #ffffff;
border-radius: 24rpx;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding-top: 18rpx;
  margin-top: 20rpx;
  padding-left: 18rpx;
}
 
.canlendarView {
  display: flex;
  flex-direction: column;
}
 .conent{
   margin-left: 37rpx;
   font-weight: 700;
   color: #333333;
 }
.canlendarTopView {
  height: 50rpx;
  font-size: 28rpx;
  margin-left: 41rpx;
  margin-top: 20rpx;
  font-weight: 700;
  color: #333333;
  font-size: 32rpx;
  /* display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; */
}
 
.leftBgView {
  /* text-align: right;
  height: 80rpx;
  display: flex;
  flex-direction: row-reverse; */
}
 
.leftView {
  /* width: 80rpx;
  height: 100%; */
  /* display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; */
}
 
.centerView {
  width: 10%;
  height: 80rpx;
  /* display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; */
}
 
.rightBgView {
  height: 80rpx;
  display: flex;
  flex-direction: row;
}
 
.rightView {
  width: 80rpx;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
 
.weekBgView {
  height: 50rpx;
  line-height: 50rpx;
  opacity: 0.5;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
 
.weekView {
  flex-grow: 1;
  text-align: center;
  font-size: 28rpx;
}
 
.dateBgView {
  height: 320rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
 
.dateEmptyView {
  width: 107.1428571429rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.dateView {
  width: 104.142857rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.datesView {
  width: 60rpx;
  height: 60rpx;
  color: #666666;
  font-size: 26rpx;
  font-weight: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.dateSelectView {
  border-radius: 10rpx;
  position: relative;
  left: 0;
  top: 0;
  color: #fff;
  background: linear-gradient(180deg,#ff5447, #ff2217);
}

js
// pages/predetermine/predetermine.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    hasEmptyGrid: false,
    cur_year: '',
    cur_month: '',
    phone:'',
    name:'',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setNowDate();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  },

  dateSelectAction: function (e) {
    var cur_day = e.currentTarget.dataset.idx;
    this.setData({
      todayIndex: cur_day
    })
    console.log(`点击的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`);
  },
 
  setNowDate: function () {
    const date = new Date();
    const cur_year = date.getFullYear();
    const cur_month = date.getMonth() + 1;
    const todayIndex = date.getDate() - 1;
    console.log(`日期：${todayIndex}`)
    const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
    this.calculateEmptyGrids(cur_year, cur_month);
    this.calculateDays(cur_year, cur_month);
    this.setData({
      cur_year: cur_year,
      cur_month: cur_month,
      weeks_ch,
      todayIndex,
    })
  },
 
  getThisMonthDays(year, month) {
    return new Date(year, month, 0).getDate();
  },
  getFirstDayOfWeek(year, month) {
    return new Date(Date.UTC(year, month - 1, 1)).getDay();
  },
  calculateEmptyGrids(year, month) {
    const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
    let empytGrids = [];
    if (firstDayOfWeek > 0) {
      for (let i = 0; i < firstDayOfWeek; i++) {
        empytGrids.push(i);
      }
      this.setData({
        hasEmptyGrid: true,
        empytGrids
      });
    } else {
      this.setData({
        hasEmptyGrid: false,
        empytGrids: []
      });
    }
  },
  calculateDays(year, month) {
    let days = [];
 
    const thisMonthDays = this.getThisMonthDays(year, month);
 
    for (let i = 1; i <= thisMonthDays; i++) {
      days.push(i);
    }
 
    this.setData({
      days
    });
  },
  handleCalendar(e) {
    const handle = e.currentTarget.dataset.handle;
    const cur_year = this.data.cur_year;
    const cur_month = this.data.cur_month;
    if (handle === 'prev') {
      let newMonth = cur_month - 1;
      let newYear = cur_year;
      if (newMonth < 1) {
        newYear = cur_year - 1;
        newMonth = 12;
      }
 
      this.calculateDays(newYear, newMonth);
      this.calculateEmptyGrids(newYear, newMonth);
 
      this.setData({
        cur_year: newYear,
        cur_month: newMonth
      })
 
    } else {
      let newMonth = cur_month + 1;
      let newYear = cur_year;
      if (newMonth > 12) {
        newYear = cur_year + 1;
        newMonth = 1;
      }
 
      this.calculateDays(newYear, newMonth);
      this.calculateEmptyGrids(newYear, newMonth);
 
      this.setData({
        cur_year: newYear,
        cur_month: newMonth
      })
    }
  },
    //手机号表单验证
    phone(e) {
      // console.log(e.detail.value);
      const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (reg.test(e.detail.value)) {} else {
        wx.showToast({
          title: '请输入正确手机号',
          icon: 'none',
          duration: 3000
        })
      }
      this.setData({
        phone:e.detail.value
      })
    },  
    //获取姓名
    name(e) {
      this.setData({
        name:e.detail.value
      })
    },
})