JavaScript简单日历实现-小程序版

/ 3评 / 0

这个日历应该是网页中最插件的了,这个也是window下的时间显示器,这篇文章,就来实现下这个效果的小程序版本,哈哈,求个赞~~这个可以当前小程序学习的一个很好的实例啦,在文章下面可以下载源码哦~

一、实现的思路

写js的时候,最重要的就是思路了,先有思路在用思路去做细节实现。首先呢,我来说下我的思路,不同人写同种效果可能有不同思路,不能说谁的思路厉害,但是有句话说的好,不管黑猫白猫,能抓到老鼠的就是好猫,同样道理~。当然了,严谨的思路更加容易维护代码啦~

思路:

1.当月有多少天

2.当月第一天星期几

3.日历一行有七个格子,对应周日到周六(周日算一周的开始),每月最多31天,最少28天,根据前两个条件来决定要显示多少行,如果当月第一天不是周日的话,则第一排前面的格子有上月天数的填满,如果当月最后一天不是周六,则剩下的格子有下月天数补上。

4.我需要是我只要传入一个年份月份参数给一个函数,它就会自动渲染日历格子 例如:calendar(year,month)

根据上面的思路我们来具体实现它。

wxml

<!--wxml-->
<view class="calendar">
      <view class="flex calendar-choose">
            <view class="tc mouth-wrap">
                  <view class="fl prev-mouth" data-handle="prev" bindtap="handleMonth">
                        <text class="iconfont icon-zuoyouqiehuan"></text>
                  </view>
                  <view class="mouth-picker">
                         <picker value="{{cur_month}}" range="{{monthList}}" bindchange="chooseMonth">
                              <view class="picker">{{cur_month+1}}月</view>
                        </picker> 
                  </view>
                  <view class="fr next-mouth"  data-handle="next" bindtap="handleMonth">
                        <text class="iconfont icon-zuoyouqiehuan1"></text>
                  </view>
            </view>
            <view class="year-wrap">
                   <picker class="tr" value="{{itemIndex}}" range="{{yearList}}" style="width:200rpx;" bindchange="chooseYear">
                         <view class="picker">{{yearList[itemIndex]}}年</view>
                   </picker>
                  <view class="iconfont icon-xia"></view>
            </view>
      </view>
       <view>
            <view class="flex week-list">
                  <view class="week-itm" wx:for="{{weeklist}}">{{item}}</view>
            </view>
            <view class="flex days-list">
                  <view class="day lm" wx:for="{{lastMonthDaysList}}" data-handle="prev" bindtap="handleMonth">
                        <text>{{item}}</text>
                  </view>
                  <block  wx:for="{{currentMonthDaysList}}">
                        <view class="day">
                              <text>{{item}}</text>
                        </view>
                  </block>
                  <view class="day nm" wx:for="{{nextMonthDaysList}}" data-handle="next" bindtap="handleMonth">
                        <text>{{item}}</text>
                  </view>
            </view> 
      </view>  
</view>

wxss

/**app.wxss**/
.calendar{overflow-x:hidden;}
.calendar-choose{height:100rpx;line-height:100rpx;background:#fefefe;padding:0 30rpx;
font-size:34rpx;color:#353535;border-bottom: 1rpx solid #e5e5e5;}
.calendar .mouth-wrap{flex: 1;display: flex;justify-content: space-between;}
.mouth-wrap .iconfont{color:#b6b6b6;font-size: 50rpx;}
.calendar .mouth-wrap>view{display: inline-block;text-align: center;}
.calendar .mouth-picker{width:200rpx;}
.calendar .prev-mouth{width:100rpx;}
.calendar .next-mouth{width:100rpx;}
.calendar .year-wrap{width:200rpx;-webkit-display: flex;display: flex;
-webkit-justify-content:center;justify-content: center;}
.calendar .year-wrap .picker{text-align: center;}
.calendar .week-list{line-height: 60rpx;background:#b9c4c9;}
.calendar .week-list .week-itm{flex:1;text-align: center;font-size:28rpx;color:#fff;}
.calendar .days-list{-webkit-flex-wrap: wrap;flex-wrap: wrap;width:99.995%;}
.calendar .days-list .day{width: 14.285%;height:60rpx;border-right:1rpx solid #e5e5e5;
border-bottom:1rpx solid #e5e5e5;color:#333;position: relative;text-align: center;line-height: 60rpx;}
.calendar .days-list .lm,.calendar .days-list .nm{color:#b6b6b6;}
.calendar .day .ep{color:#333;}

最关键的wxs(也就是js啦)


Page({
  data: {
    weeklist: ['日', '一', '二', '三', '四', '五', '六'],
    itemIndex: 10,   //当前年份的数组下标    
  },                 //这个值和年份的前后一致的值相等,要注意就是年份访问时一当前年为切割点,
  /**                //前后年份范围的数值相等比较好计算,当然看需求而定啦。
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;    
    var cur_year = new Date().getFullYear();   //获取当前年
    var cur_month = new Date().getMonth();    //获取当前月
    that.setData({
      dataTime: cur_year + "-" + cur_month + "-01"
    });

    that.calendar(cur_year, cur_month);
    //拿到当前的年月,渲染第一次进来小程序的日期数据
    that.setData({
      cur_year,
      cur_month,
    });

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '简单日历实现小程序版本',
      desc: '简单日历实现小程序版本',
      path: '/pages/index/index'
    };
  },

  //日历方法  ,参数是只要穿入年和月就可以渲染出来当前年月的日历,
  //用let来代替var,let是es6的,也是用来声明变量的,只是没有变量提升,更加严谨
  calendar: function (year, month) {
      let fullDay = parseInt(new Date(year, month + 1, 0).getDate()),//当前月总天数
      startWeek = parseInt(new Date(year, month, 1).getDay()),  //当前月第一天周几
      lastMonthDay = parseInt(new Date(year, month, 0).getDate()),   //上个月的天数
      totalDay = (fullDay + startWeek) % 7 == 0 ? (fullDay + startWeek) : fullDay + startWeek + (7 - (fullDay + startWeek) % 7);//元素总个数
    //年份范围  我是取当前年的前后十年
    let newYearList = [], newMonthList = [], curYear = new Date().getFullYear();
    for (var i = curYear - 10; i < curYear + 10; i++) {
      newYearList.push(i);
    }
    //月份范围
    for (var i = 1; i <= 12; i++) {
      newMonthList.push(i);
    }

    let lastMonthDaysList = [], currentMonthDaysList = [], nextMonthDaysList = [];
    // 遍历日历格子
    for (let i = 0; i < totalDay; i++) {
      if (i < startWeek) {
         //当月第一天不是周日的情况下,前面有几个格式是上月的,就渲染上月的天数
        lastMonthDaysList.push(lastMonthDay - startWeek + 1 + i);  

      } else if (i < (startWeek + fullDay)) {

       //当月天数
        currentMonthDaysList.push(i + 1 - startWeek);     

      } else {
        //当月最后一天不是周六的时候,剩下的各自就渲染下月的天数
        nextMonthDaysList.push((i + 1 - (startWeek + fullDay)));    
      }
    }

    this.setData({
      monthList: newMonthList,//月份
      yearList: newYearList, //年份范围
      lastMonthDaysList,   //上月总天数
      currentMonthDaysList, //当前月总天数
      nextMonthDaysList  //下月总天数
    });
    //要注意获取的年份是从0开始算起的,所以需要添加一来显示,这是中国地区的习惯啦
    var tmonth = month + 1;     

     //让小程序的标题也跟着改变
    wx.setNavigationBarTitle({ title: year + "年" + tmonth + "月" })     
  },

  //选择月
  //当用picker选择月份的时候,月份就要发生改变,然后把新的年月传入calendar参数中,重新渲染日历
  chooseMonth: function (e) {    
    //获取的月份和我们想要显示的月份相差一,所以需要做判断  
    var chose_month = parseInt(e.detail.value) + 1 == 13 ? 1 : parseInt(e.detail.value);   
    this.setData({
      cur_month: chose_month,
    });
    //小程序修改data的数据是用setData()方法
    this.calendar(this.data.cur_year, this.data.cur_month)    

  },

  //选择年
  chooseYear: function (e) {    //同选择月份一样
    var idx = e.detail.value;
    var y = this.data.yearList[idx];
    console.log(idx)
    this.setData({
      itemIndex: idx,
      cur_year: y,
    });
    this.calendar(y, this.data.cur_month);

  },

  //操作月  操作月的函数我写成了一个,
  //也可以分开来写,所以大家可以精简,我这是为了让大家看清晰~
  handleMonth: function (e) {    
    const handle = e.currentTarget.dataset.handle;
    const cur_year = this.data.cur_year;
    const cur_month = this.data.cur_month;
    const index = this.data.itemIndex;
    if (handle === 'prev') {
      let newMonth = cur_month - 1;
      let newYear = cur_year;
      let idx = index;
      if (newMonth < 0) {
        newYear = cur_year - 1;
        idx = index - 1;
        newMonth = 11;
      }

      this.calendar(newYear, newMonth);
      this.setData({
        cur_year: newYear,
        cur_month: newMonth,
        itemIndex: idx
      });

    } else {
      let newMonth = cur_month + 1;
      let newYear = cur_year;
      let idx = index;
      if (newMonth > 11) {
        newYear = cur_year + 1;
        idx = index + 1;
        newMonth = 0;
      }

      this.calendar(newYear, newMonth);
      this.setData({
        cur_year: newYear,
        cur_month: newMonth,
        itemIndex: idx
      });
    }
  }
})
小程序,小程序日历版

小程序,小程序日历版

如果你还有什么不清楚的,欢迎讨论交流,共同进步~

简书求关注http://www.jianshu.com/u/bfd55badb1f4

原创文章,并且,这个日历在我做的项目已经上线了,如果认为对你有帮助,求赞求关注~~~谢谢

给个小程序包,有需要的可以来下载哦

现在下载源码

3条回应:“JavaScript简单日历实现-小程序版”

  1. buWang丶说道:

    真心感谢分享,学习中

发表评论

电子邮件地址不会被公开。 必填项已用*标注