日历

我遇到了小程序要用日历的需求,本来想省事,在网上找插件用,看了好多,感觉好麻烦,就自己写了有个,功能比较简单,实现基本需求!

这是data数据

data: {

    //当前时间

    currentime:[],

    //月份日历

    currentarr: [],

  },

页面

 

    «

    {{currentime[0]}}-{{currentime[1]}}

    »

 

 

   

   

   

   

   

   

   

 

 

   

     

      {{item}}

   

 

css

.goouc_calendar_wrap {

  width: 92%;

  background: rgba(255, 255, 255, 1);

  box-shadow: 0px 1px 22px 0px rgba(53, 146, 255, 0.33);

  border-radius: 10px;

  margin-top: -46px;

  margin-left: 4%;

  padding-bottom: 10px;

  box-sizing: border-box;

  z-index: 9;

}

.goouc_calendar_tit {

  width: 100%;

  height: 44px;

  line-height: 44px;

  text-align: center;

  font-size: 17px;

  font-weight: 500;

  color: rgba(17, 17, 17, 1);

  border-bottom: 1px solid #ccc;

  position: relative;

}

.goouc_calendar_tit .lt {

  position: absolute;

  width: 30px;

  left: 30%;

  top: 0;

}

.goouc_calendar_tit .rt {

  position: absolute;

  width: 30px;

  right: 30%;

  top: 0;

}

.goouc_calendar_xq {

  width: 100%;

  height: 44px;

  line-height: 44px;

  text-align: center;

  font-size: 15px;

  font-weight: 500;

  color: rgba(17, 17, 17, 1);

  display: flex;

  justify-content: space-around;

}

.goouc_calendar_xq>view {

  width: 14.28%;

  height: 44px;

  line-height: 44px;

}

.goouc_date {

  width: 100%;

  text-align: center;

  font-size: 17px;

  /* font-weight:500; */

  color: rgba(17, 17, 17, 1);

  display: flex;

  justify-content: space-around;

  flex-wrap: wrap;

}

.goouc_date .goouc_view {

  width: 14.28%;

  height: 44px;

  line-height: 44px;

  position: relative;

}

.goouc_date .goouc_view image {

  display: none;

  position: absolute;

  width: 24px;

  height: 24px;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

}

.goouc_date .goouc_view image.active {

  display: block;

}

.goouc_date::after {

  content: '';

  flex: auto;

}

js

//获取当前时间函数

  currentime: function() {

    var date = new Date();

    var y = date.getFullYear();

    var m = date.getMonth() + 1;

    var d = date.getDate();

    return [y, m, d];

  },

  // 获取时间是星期几

  nyr: function(y, m, d) {

    // 求解cy年cm月cd日是星期几,parseInt代表取整 d=1是去每个月第一天

    var cc = parseInt(y / 100); //c

    var cy = y - cc * 100; //y

    var cm = m; //m

    var cd = d; //d

    // 某年的1、2月要看作上一年的13、14月来计算,比如2003年1月1日要看作2002年的13月1日来计算

    if (m == 1 || m == 2) {

      cc = parseInt((y - 1) / 100);

      cy = y - 1 - cc * 100;

      cm = 12 + m;

    }

    //w=y+[y/4]+[c/4]-2c+[26(m+1)/10]+d-1

    // var csum = y + [y / 4] + [c / 4] - 2c+[26(m + 1)/10]+d-1;

    var csum = cy + parseInt(cy / 4) + parseInt(cc / 4) - 2 * cc + parseInt(26 * (cm + 1) / 10) + cd - 1;

    // 注意使用蔡勒公式时出现负数情况

    if (csum < 0) {

      var fd = parseInt((csum % 7 + 7) % 7);

    } else {

      var fd = parseInt(csum % 7);

    }

    var arr = [];

    switch (fd) {

      case 0:

        arr = [];

        break;

      case 1:

        arr = [''];

        break;

      case 2:

        arr = ['', ''];

        break;

      case 3:

        arr = ['', '', ''];

        break;

      case 4:

        arr = ['', '', '', ''];

        break;

      case 5:

        arr = ['', '', '', '', ''];

        break;

      case 6:

        arr = ['', '', '', '', '', ''];

        break;

    }

    return arr;

  },

  //塞1-28/29/30/31

  filldate: function (year, month) {

    var month = month;

    var year = year;

    var cond1 = year % 4 == 0; //条件1:年份必须要能被4整除

    var cond2 = year % 100 != 0; //条件2:年份不能是整百数

    var cond3 = year % 400 == 0; //条件3:年份是400的倍数

    //当条件1和条件2同时成立时,就肯定是闰年,所以条件1和条件2之间为“与”的关系。

    //如果条件1和条件2不能同时成立,但如果条件3能成立,则仍然是闰年。所以条件3与前2项为“或”的关系。

    //所以得出判断闰年的表达式:

    var cond = cond1 && cond2 || cond3;

    if (cond) {

      var daynum = 29;

    } else {

      var daynum = 28;

    }

    var montharr = [];

    switch (month) {

      case 2:

        for (var i = 0; i < daynum; i++) {

          montharr.push(i + 1);

        }

        break;

      case 4:

        for (var i = 0; i < 30; i++) {

          montharr.push(i + 1);

        }

        break;

      case 6:

        for (var i = 0; i < 30; i++) {

          montharr.push(i + 1);

        }

        break;

      case 9:

        for (var i = 0; i < 30; i++) {

          montharr.push(i + 1);

        }

        break;

      case 11:

        for (var i = 0; i < 30; i++) {

          montharr.push(i + 1);

        }

        break;

      default:

        for (var i = 0; i < 31; i++) {

          montharr.push(i + 1);

        }

    }

    return montharr;

  }

onLoad: function(options) {

    // 当前时间

    var currentime = this.currentime();

    // 计算出当月的日期塞进数组

    var currentarr = this.nyr(currentime[0], currentime[1], 1).concat(this.filldate(currentime[0], currentime[1]));

    this.setData({

      currentime: currentime,

      currentarr: currentarr

    }); 

    //console.log(this.nyr(currentime[0], currentime[1], 1), this.currentime(), currentarr);             

  },

//上个月

promonth() {

    var currentime = this.data.currentime;

    // 当前时间

    currentime[1]--;

    if (currentime[1] <= 0) {

      currentime[1] = 12;

      currentime[0]--;

    }

    // 计算出当月的日期塞进数组

    var currentarr = this.nyr(currentime[0], currentime[1], 1).concat(this.filldate(currentime[0], currentime[1]));

    this.setData({

      currentime: currentime,

      currentarr: currentarr

    });

  },

//下个月

nextmonth() {

    var currentime = this.data.currentime;

    // 当前时间

    currentime[1]++;

    if (currentime[1]>12){

      currentime[1] = 1;

      currentime[0]++;

    }

    // 计算出当月的日期塞进数组

    var currentarr = this.nyr(currentime[0], currentime[1], 1).concat(this.filldate(currentime[0], currentime[1]));

    this.setData({

      currentime: currentime,

      currentarr: currentarr

    });

  },

你可能感兴趣的:(日历)