小程序中的周历

最近碰到一个需求，需要实现选择月份，按周展示日历信息，记录一下。其实封装成组件更好，但是当时页面还有别的需求需要实现，就没有抽出去封装。

对应的页面

xxx.wxml

<view class='main'>
  <view class='top'>
    <picker mode="date" fields="month" class='picker1' bindchange="dateMonthChange" value="{{chooseMonth}}">
      <view class="picker">
        {{timeBean.yearMonth}}
      </view>
    </picker>
  </view>
  <view class='line'></view>
  <view class='row daterow'>
    <view class='column centerarrow' bindtap='lastWeek'>
      <text class='iconfont icon-sanjiaoleft' style='color:#fff'></text>
    </view>
    <view  wx:for="{{timeBean.weekDayList}}" wx:key="" data-index="{{index}}" class='column' bindtap='itemClick'>
      <view class='weekType'>{{item.week}}</view>
      <view class='dateType'>{{item.day}}</view>
    </view>
    <view class='column centerarrow' bindtap='nextWeek'>
      <text class='iconfont icon-sanjiaoright' style='color:#fff'></text>
    </view>
  </view>
  </view>
  </view>
</view>

xxx.wxss

page {
  background: #f5f5f5;
}
.top {
  background: #fff;
  padding: 10rpx 30rpx;
  display: flex;
  justify-content: space-between;
}

.row { 
  display:flex;
  flex-direction:row;  
  justify-content: space-around; 
  align-items: center;
  background: #fff;}
.column{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 5rpx;
  padding-top: 5rpx;  
  margin-top: 10rpx;
  flex: 1;
}
.select-column{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 5rpx;
  padding-top: 5rpx;  
  margin-left: 5rpx;
  margin-right: 5rpx;
  margin-top: 10rpx;
  flex: 1;
  border-top-left-radius:20rpx;
  border-top-right-radius:20rpx;
  background: #36d6a6;
}
.timeType{
  font-size: 35rpx;
  font-weight:bold;
}
 
.dateType{
  font-size: 35rpx;
  font-weight:bold;
}
.weekType{
  font-size: 28rpx;
  color: darkgrey;
}
.line{
  height: 1rpx;
  width: 100%;
  background-color: gainsboro;
}
.line-shadow{
  height: 3rpx;
  width: 100%;
  background-color: gainsboro;
  box-shadow:5px 0px 5px 0px gainsboro;
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/**
*字体图标，左右箭头，可以修改界面对图标进行修改替换
*/
.icon-sanjiaoleft:before { content: "\e6b6"; } 
.icon-sanjiaoright:before { content: "\e6b7"; }
.icon-book1:before { content: "\e631"; }
.icon-mifan:before { content: "\e606"; }
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1533031583450'); /* IE9*/
  src: url('iconfont.eot?t=1533031583450#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1533031583450') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1533031583450#iconfont') format('svg'); /* iOS 4.1- */
}

xxx.js

// pages/index/schedule/schedule.js
const api = require("../../../utils/api.js")
// const util = require("../../../utils/calendar.js")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    chooseMonth: '', // 选择查看月份
    selectWeek: 0,
    timeBean: {},
  },

  // 选择月份
  dateMonthChange(e) {
    const chooseMonth = e.detail.value
    this.setData({
      chooseMonth,
    })
    // 选择的月份的时间戳
    const choosedTimeStamp = new Date(chooseMonth).getTime()
    // 获取时间戳一周的日历数据
    const timeBean = this.getWeekDayList(0, choosedTimeStamp)
    this.setData({
      timeBean
    })
    // 判断选择的月份1号是周几
    const weekNo = new Date(`${timeBean.yearMonth}-01`).getDay()
    let startDay = ''
    // 如果1号是周一以后，那么开始时间是上个月的，开始时间月份减一
    if(weekNo > 1) {
      if (timeBean.weekDayList[weekNo - 2].day > timeBean.weekDayList[weekNo - 1].day) {
        startDay = new Date(new Date(`${timeBean.yearMonth}-01`).getTime() - (weekNo - 1) * 24 * 60 * 60 * 1000).toLocaleDateString().replace(/\//g, '-')
      }
    }
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    this.setData({
      timeBean: this.getWeekDayList(this.data.selectWeek)
    })
  },
  /**
   * 点击上一周，调用工具类中的方法获取到数据
   */
  lastWeek: function (e) {
    const { doctorArr, doctorIndex } = this.data
    var selectWeek = -1;
    var timeBean = this.data.timeBean
    let temparr = timeBean.yearMonth.split('-')
    // 时间需要是2000-01-01 的格式小程序才能用new Date()方法
    const tempmonth = temparr[1] >= 10 ? temparr[1] : '0' + temparr[1]
    const tempday = timeBean.weekDayList[0].day >= 10 ? timeBean.weekDayList[0].day : '0' + timeBean.weekDayList[0].day
    let tempdate = temparr[0] + '-' + tempmonth + '-' + tempday
    // 默认开始时间时间戳为列表第一个的时间  也就是周一
    var startDay = new Date(new Date(tempdate)).getTime()
    // 如果选择过月份，那么
    if (this.data.chooseMonth) {
      const weekNo = new Date(`${temparr[0]}-${tempmonth}-01`).getDay()
      // 判断选择的月份的第一天是不是在周中，是的话开始时间的月份减一
      if(weekNo > 1) {
        if (timeBean.weekDayList[weekNo - 2].day > timeBean.weekDayList[weekNo - 1].day) {
          startDay = new Date(`${temparr[0]}-${tempmonth}-01`).getTime() - (weekNo - 1) * 24 * 60 * 60 * 1000
        }
      }
      // 清空选择的月份
      this.setData({
        chooseMonth: ''
      })
    }
    // 根据开始时间获取日历数据
    timeBean = this.getWeekDayList(selectWeek, startDay)
    this.setData({
      timeBean
    })
  },

  /**
   * 点击了下一周，直接调用工具类方法获取到数据
   */
  nextWeek: function (e) {
    var selectWeek = 1;
    var timeBean = this.data.timeBean
    let temparr = timeBean.yearMonth.split('-')
    // 时间需要是2000-01-01 的格式小程序才能用new Date()方法
    const tempmonth = temparr[1] >= 10 ? temparr[1] : '0' + temparr[1]
    const tempday = timeBean.weekDayList[0].day >= 10 ? timeBean.weekDayList[0].day: '0' + timeBean.weekDayList[0].day
    let tempdate = temparr[0] + '-' + tempmonth + '-' + tempday
    var startDay = new Date(new Date(tempdate)).getTime()
    if(this.data.chooseMonth) {
      const weekNo = new Date(`${temparr[0]}-${tempmonth}-01`).getDay()
      if(weekNo > 1) {
        if (timeBean.weekDayList[weekNo - 2].day > timeBean.weekDayList[weekNo - 1].day) {
          startDay = new Date(`${temparr[0]}-${tempmonth}-01`).getTime() - (weekNo - 1) * 24 * 60 * 60 * 1000
        }
      }
      this.setData({
        chooseMonth: ''
      })
    }
    timeBean = this.getWeekDayList(selectWeek, startDay)
    this.setData({
      timeBean
    })
  },

  /**
   * 选中了某一日，改变selectDay为选中日
   */
  dayClick: function (e) {
    console.log(e)
    // var timeBean = this.data.timeBean
    // timeBean.selectDay = e.detail;
    // this.setData({
    //   timeBean,
    // })
  },

  //点击了某一日，传递该日的下标
  itemClick: function (e) {
    console.log(e)
    // const index = e.currentTarget.dataset.index
  },

  /**
 * 获取该周的所要显示的周和日期的对应数据
 * var weekDay = {week: '',day: ''}
 * 参数：selectWeek  0为当前时间，-1为时间向前推一周，1则向后加一周
 * 参数：choosedTimeStamp  选择的月份的第一天的时间戳
 */
  getWeekDayList(selectWeek, choosedTimeStamp) {
    // 1.获取周一对应得时间
    // 2.用循环七次添加周一到周日对应得周几和几号
    var timestamp = (choosedTimeStamp || new Date().getTime()) + (selectWeek * 7) * 24 * 60 * 60 * 1000;

    var selectWeekTime = timestamp
    var mondayTime = selectWeekTime - (new Date(selectWeekTime).getDay() - 1) * 24 * 60 * 60 * 1000

    var timeBean = {
      yearMonth: '',
      weekDayList: []
    }
    var weekList = ['一', '二', '三', '四', '五', '六', '日' ]
    for(var i = 0; i< 7; i++) {
      var weekDay = {
        week: weekList[i],
        day: new Date((mondayTime + i * 24 * 60 * 60 * 1000)).getDate()
      }
      timeBean.weekDayList.push(weekDay)
    }

    timeBean.yearMonth = this.getYearMonth(selectWeekTime);
    return timeBean;
  },

  //时间戳获得年月
  getYearMonth(res) {
    var time = new Date(res);
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    return y + "-" + m;
  },
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 微信小程序学习笔记。
    1.小程序起步 （1）点击https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon阅读 8,727评论 0赞 0
  • iOS面试题汇总2
    一.浅拷贝和深拷贝的区别1.浅拷贝是指针拷贝，对一个对象浅拷贝就是对该对象的指针进行复制产生一个新的指针指向该对象...
    神经病姐姐的日常阅读 2,394评论 0赞 0
  • 第二次画你
    我这也许就是传说中的杠上了，第二幅画你，虽然还是眼高手低，但是比昨天是好多了，我就这么一天天练下去，相信总会画出自...
    野淳阅读 877评论 0赞 2