Lenny-Hu / note

blog
5 stars 1 forks source link

简单的日历(仅输出日历数据,方便使用mvvm) #74

Open Lenny-Hu opened 5 years ago

Lenny-Hu commented 5 years ago

简单日历

日历使用

 // 简单日历
  function Calendar (date) {
    this.date = new Date(date || Date.now());
    this.year = this.date.getFullYear();
    this.month = this.date.getMonth();
    this.day = this.date.getDate();
    this.weeks = ['日', '一', '二', '三', '四', '五', '六'];
    this.total = 6 * 7; // 总共单元格(不包含星期)
    this.days = [];
  }

  // 判断年份是否为润年
  Calendar.prototype.isLeapYear = function () {
    return (this.year % 400 == 0) || (this.year % 4 == 0 && this.year % 100 != 0);
  }

  // 获取一年每个月的天数
  Calendar.prototype.getMonthDays = function () {
    var results = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    results[1] = this.isLeapYear(this.year) ? 29 : 28;
    return results;
  }

  // 返回指定日期是星期几,默认返回当前时间本月的第一天
  Calendar.prototype.getWeek = function (date) {
    return new Date(date || this.year + '/' + (this.month + 1) + '/1').getDay();
  }

  // 获取给定日期的月的天数,不传参为获取当前时间所在月份
  Calendar.prototype.getDaysByDate = function (date) {
    var _d = new Calendar(date);
    var _monthDays = _d.getMonthDays();
    var maxDay = _monthDays[_d.month];

    var results = [];
    for (var index = 1; index <= maxDay; index++) {
      results.push({
        day: index,
        year: _d.year,
        month: _d.month
      });
    }
    return results;
  }

  // 获取上一个月日期字符串
  Calendar.prototype.getLastMonth = function () {
    var month = this.month; // 0 - 11
    var year = this.year;

    if (month == 0) {
      year--;
      month = 11 + 1;
    }
    var lastMonthStr = year + '/' + month + '/1';
    return lastMonthStr;
  }

  // 获取下一个月的日期字符串
  Calendar.prototype.getNextMonth = function () {
    var month = this.month; // 0 - 11
    var year = this.year;

    if (month == 11) {
      year++;
      month = 0 + 1;
    } else {
      month = month + 2; // 下一个月
    }

    var nextMonthStr = year + '/' + month + '/1';
    return nextMonthStr;
  }

  // init
  Calendar.prototype.init = function () {
    var last = this.getDaysByDate(this.getLastMonth());
    var cur = this.getDaysByDate(this.date);
    var next = this.getDaysByDate(this.getNextMonth());

    // 本月第一天为星期几,0 - 6,其值为需要补充的上月天数
    // 如果第一天为星期日,那么在日历上显示上个月一周
    var week = this.getWeek();
    last = week ? last.slice(-week) : last.slice(-7);

    // 需要的下月天数,总单元格 - 当月天数 - 上月天数
    var nextMouthDay = this.total - last.length - cur.length;
    next = nextMouthDay ? next.slice(0, nextMouthDay) : [];

    last = last.map(function (v) {
      v.type = 'prev';
      return v;
    });

    next = next.map(function (v) {
      v.type = 'next';
      return v;
    });

    cur = cur.map(function (v) {
      v.type = 'cur';
      return v;
    });

    this.days = this.days.concat(last, cur, next);
    return this.days;
  }

使用

var calendar = null;

var fn = function (date) {
  calendar = new Calendar(date);
  calendar.init();
  console.log(calendar);
}

// 初始化
fn();

// 获取上个月
fn(calendar.getLastMonth());

// 获取下个月
fn(calendar.getNextMonth());