hyj-ui/es/calendar/index.js

测试文件

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

/* eslint-disable no-param-reassign */
import dayjs from 'dayjs';
import solarLunar from 'solarlunar';
import { getMonthDays, getFirstDayOfMonth } from "../utils/common";
import "./assets/styles/index.less";
import renderMonth from "./panel/month";
import renderYear from "./panel/year";

var Calendar = /*#__PURE__*/function () {
  function Calendar(mountNode) {
    _classCallCheck(this, Calendar);

    _defineProperty(this, "value", void 0);

    _defineProperty(this, "mountNode", void 0);

    _defineProperty(this, "monthDays", void 0);

    _defineProperty(this, "firstWeekDay", void 0);

    _defineProperty(this, "count", void 0);

    _defineProperty(this, "contentHtml", void 0);

    _defineProperty(this, "options", void 0);

    _defineProperty(this, "mounted", void 0);

    _defineProperty(this, "selectedDate", void 0);

    _defineProperty(this, "weekDay", ['日', '一', '二', '三', '四', '五', '六']);

    this.options = {
      weekStartOrder: 'Sunday',
      showWeekHeader: true,
      mode: 'month'
    };
    this.mountNode = mountNode;
    this.mounted = false;
    this.value = new Date().toLocaleDateString();
    this.monthDays = getMonthDays(new Date().getFullYear(), new Date().getMonth() + 1);
    this.firstWeekDay = getFirstDayOfMonth(new Date().getFullYear(), new Date().getMonth() + 1);
    this.selectedDate = dayjs().format('YYYY-MM-DD');
    this.contentHtml = '';
    this.count = 0;
  }

  _createClass(Calendar, [{
    key: "setDate",
    value: function setDate(value, format) {
      this.value = dayjs(value, format).format('YYYY-MM-DD');
      this.update();
    }
  }, {
    key: "solarToLunar",
    value: function solarToLunar(year, month, day) {
      var lunarData = solarLunar.solar2lunar(year, month, day);

      if (lunarData.dayCn === '初一') {
        lunarData.dayCn = lunarData.monthCn;
      }

      return lunarData;
    }
  }, {
    key: "bindEventHandle",
    value: function bindEventHandle() {
      this.render(true);
    }
  }, {
    key: "update",
    value: function update() {
      this.monthDays = getMonthDays(dayjs(this.value).year(), dayjs(this.value).month() + 1);
      this.firstWeekDay = getFirstDayOfMonth(dayjs(this.value).year(), dayjs(this.value).month() + 1);
      this.render();
      this.bindEventHandle();
    } // 获取渲染日历的行数

  }, {
    key: "getRenderRows",
    value: function getRenderRows(firstWeekDay, monthDays, renderOrder) {
      var renderRows = 0;

      if (renderOrder === 'Monday') {
        // console.log('哈哈哈哈哈', firstWeekDay, monthDays);
        if (firstWeekDay === 0) {
          // 星期天
          renderRows = Math.ceil((firstWeekDay + monthDays + 6 - dayjs(this.value).endOf('month').day() + 7) / 7);
        } else {
          renderRows = Math.ceil((firstWeekDay + monthDays + 6 - dayjs(this.value).endOf('month').day()) / 7);
        }
      } else if (renderOrder === 'Sunday') {
        if (firstWeekDay === 6) {
          // 星期六
          renderRows = Math.ceil((firstWeekDay + monthDays + 6 - dayjs(this.value).endOf('month').day() + 7) / 7);
        } else {
          renderRows = Math.ceil((firstWeekDay + monthDays + 6 - dayjs(this.value).endOf('month').day()) / 7);
        }
      }

      return renderRows;
    }
  }, {
    key: "getOtherMonthDays",
    value: function getOtherMonthDays(row, weekDay, // 星期几
    currentMonth, firstWeekDay) {
      var dateString = '';
      var lunarData = {};
      var nowDay = 0;

      if (row === 0) {
        if (firstWeekDay === 0 && this.options.weekStartOrder === 'Monday') {
          dateString = dayjs("".concat(dayjs(this.value).year(), "-").concat(currentMonth, "-", 1)).subtract(firstWeekDay - weekDay + 6, 'day').format('YYYY-MM-DD');
        } else {
          // 从星期天开始
          dateString = dayjs("".concat(dayjs(this.value).year(), "-").concat(currentMonth, "-", 1)).subtract(firstWeekDay - weekDay, 'day').format('YYYY-MM-DD');
        }

        lunarData = this.solarToLunar(dayjs(dateString).year(), dayjs(dateString).month() + 1, dayjs(dateString).date());
        nowDay = dayjs(dateString).date();
      } else {
        if (this.options.weekStartOrder === 'Monday') {
          // dateString = dayjs(this.value);
          dateString = dayjs("".concat(dayjs(this.value).year(), "-").concat(currentMonth, "-").concat(this.monthDays)).add(weekDay - dayjs("".concat(dayjs(this.value).year(), "-").concat(currentMonth, "-").concat(this.monthDays)).day(), 'day').format('YYYY-MM-DD');
        } else {
          dateString = dayjs("".concat(dayjs(this.value).year(), "-").concat(currentMonth, "-").concat(this.monthDays)).add(weekDay - dayjs("".concat(dayjs(this.value).year(), "-").concat(currentMonth, "-").concat(this.monthDays)).day() - 1, 'day').format('YYYY-MM-DD');
        }

        lunarData = this.solarToLunar(dayjs(dateString).year(), dayjs(dateString).month() + 1, dayjs(dateString).date() + 1);
        nowDay = dayjs(dateString).endOf('day').add(1, 'day').date();
      }

      return {
        dateString: dateString,
        lunarData: lunarData,
        weekDay: weekDay,
        nowDay: nowDay
      };
    }
  }, {
    key: "getRenderStartWeek",
    value: function getRenderStartWeek(rowIndex, weekIndex) {
      // firstWeekDay= 0代表星期天
      var renderStartWeek = false;

      if (this.options.weekStartOrder === 'Monday') {
        // 星期一开始展示
        renderStartWeek = rowIndex === 0 && weekIndex + 1 === this.firstWeekDay || rowIndex === 0 && weekIndex === 6 && this.firstWeekDay === 0;
      } else {
        // 星期天开始展示
        renderStartWeek = rowIndex === 0 && weekIndex === this.firstWeekDay || rowIndex === 0 && weekIndex === 0 && this.firstWeekDay === 0;
      }

      return renderStartWeek;
    }
  }, {
    key: "render",
    value: function render(bindEvent) {
      var rootNode = document.querySelector(this.mountNode);
      this.count = 0;

      if (rootNode) {
        if (this.options.mode === 'month') {
          this.contentHtml = renderMonth.bind(this)(bindEvent);
        } else {
          this.options = _objectSpread(_objectSpread({}, this.options), {}, {
            showWeekHeader: false
          });
          this.contentHtml = renderYear.bind(this)(bindEvent);
        }

        if (!bindEvent) {
          rootNode.innerHTML = this.contentHtml;
        }
      }
    }
    /**
     * 创建一个日历
     * @param {options.dateCellRender}  dateCellRender: (dateString: string, nowDay: number, weekDay: number) => string; 日期单元格渲染函数
     * @param {options.dateCellClick} dateCellClick: (dateString: string, nowDay: number, weekDay: number) => void; // 点击日期的回调
     * @param {options.weekText} weekText: string[]; // 自定义星期 文字
     * @param {options.initValue} initValue: string; // 初始化日期
     * @param {options.showLunaCalendar} showLunaCalendar: boolean; // 是否显示农历
     * @param {options.headClassName} headClassName: string; // 头部样式
     * @param {options.weekStartOrder} weekStartOrder: 'Monday' | 'Sunday'; 渲染顺序
     * @param {options.mountNode} mountNode: string; // 挂载节点
     * @param {options.mode} mode: 'month' | 'year'; 模式
     * @param {options.showWeekHeader} showWeekHeader: boolean; 是否显示星期
     */

  }, {
    key: "create",
    value: function create(options) {
      this.options = _objectSpread(_objectSpread({}, this.options), options);

      if (options !== null && options !== void 0 && options.weekText && options.weekText.length !== 7) {
        throw new Error('weekText长度必须为7');
      } else {
        this.weekDay = (options === null || options === void 0 ? void 0 : options.weekText) || ['日', '一', '二', '三', '四', '五', '六'];
      }

      if ((options === null || options === void 0 ? void 0 : options.weekStartOrder) === 'Monday' && !(options !== null && options !== void 0 && options.weekText)) {
        this.weekDay = ['一', '二', '三', '四', '五', '六', '日'];
      }

      if (options !== null && options !== void 0 && options.initValue) {
        try {
          this.value = dayjs(options.initValue).format('YYYY-MM-DD');
          this.firstWeekDay = getFirstDayOfMonth(dayjs(this.value).year(), dayjs(this.value).month() + 1);
          this.monthDays = dayjs(this.value).daysInMonth();
        } catch (error) {
          throw new Error('initValue格式错误，请输入YYYY-MM-DD格式的日期');
        }
      }

      var rootNode = document.querySelector(this.mountNode);

      if (rootNode) {
        this.render();
        this.bindEventHandle();
      } else {
        throw new Error('mountNode is not found');
      }
    }
  }]);

  return Calendar;
}();

export default Calendar;