hust-epi/admin-ui/yvanui/yvanui.calendar.js

/**
 * YvanUI
 *
 * Copyright (c) 2018 www.yvanui.com. All rights reserved.
 * @author luoyifan@qq.com
 * @time 2018-11-27 11:16:00
 */
(function ($) {

  function setSize(target, param) {
    var opts = $.data(target, 'calendar').options;
    var t = $(target);
    if (param) {
      $.extend(opts, {
        width: param.width,
        height: param.height
      });
    }
    t._size(opts, t.parent());
    t.find('.calendar-body')._outerHeight(t.height() - t.find('.calendar-header')._outerHeight());
    if (t.find('.date-year-list').is(':visible')) {
      opts.startYear = opts.year - 7;
      showSelectYear(target);
    } else if (t.find('.date-month-list').is(':visible')) {
      showSelectMonth(target);
    }
  }

  function init(target) {
    $(target).addClass('calendar').html(
      '<div class="calendar-header">' +
      '  <div class="calendar-nav calendar-prevmonth fa fa-angle-left"></div>' +
      '  <div class="calendar-nav calendar-nextmonth fa fa-angle-right"></div>' +
      '  <div class="calendar-nav calendar-prevyear fa fa-angle-double-left"></div>' +
      '  <div class="calendar-nav calendar-nextyear fa fa-angle-double-right"></div>' +
      '  <div class="calendar-title">' +
      '    <div class="year-range"></div>' +
      '    <div class="date-set">' +
      '      <span class="dateYear"></span>' +
      '      <span class="dateMonth"></span>' +
      '    </div>' +
      '  </div>' +
      '</div>' +
      '<div class="calendar-body">' +
      '  <ul class="calendar-menu date-month-list" />' +
      '  <ul class="calendar-menu date-year-list" />' +
      '  <div class="calendar-add-time">' +
      '    <ul class="add-time-list">' +
      '      <li><p>时</p><ol class="v-hh"></ol></li>' +
      '      <li><p>分</p><ol class="v-mm"></ol></li>' +
      '      <li><p>秒</p><ol class="v-ss"></ol></li>' +
      '    </ul>' +
      '  </div>' +
      '</div>'
    );

    var html = [];
    for (var i = 0; i < 24; i++) {//时
      if (i < 10) {
        html.push('<li>0' + i + '</li>');
      } else {
        html.push('<li>' + i + '</li>');
      }
    }
    $(target).find('.add-time-list .v-hh').html(html.join(''));

    html = [];
    for (var i = 0; i < 60; i++) {//分-秒
      if (i < 10) {
        html.push('<li>0' + i + '</li>');
      } else {
        html.push('<li>' + i + '</li>');
      }
    }
    $(target).find('.add-time-list .v-mm').html(html.join(''));
    $(target).find('.add-time-list .v-ss').html(html.join(''));

    $(target).bind('_resize', function (e, force) {
      if ($(this).hasClass('easyui-fluid') || force) {
        setSize(target);
      }
      return false;
    });
  }

  function restSelect(target) {
    $(target).find('.date-set').show();
    $(target).find('.year-range').hide();
    $(target).find('.calendar-menu').hide();
    $(target).find('.calendar-prevmonth').show();
    $(target).find('.calendar-nextmonth').show();
    $(target).find('.calendar-prevyear').show();
    $(target).find('.calendar-nextyear').show();
  }

  function resetTimePanel(target) {
    var opts = $.data(target, 'calendar').options;
    var $panel = $(target).find('.calendar-add-time');
    var $dom = $(target);

    if (!opts.showTime) {
      $panel.hide();
      $dom.removeClass('show-time');
      return;
    }

    $dom.addClass('show-time');
    $dom.find('.calendar-dtable').width(opts.width - 180);
    $dom.find('.calendar-menu').width(opts.width - 180);

    $panel.show();
  }

  //显示年份
  function showSelectYear(target) {
    var opts = $.data(target, 'calendar').options;

    restSelect(target);
    $(target).find('.calendar-prevmonth').hide();
    $(target).find('.calendar-nextmonth').hide();
    $(target).find('.date-set').hide();
    $(target).find('.year-range').show();

    var $ul = $(target).find('.date-year-list');
    $ul.show();

    var startYear = opts.startYear;
    $ul.empty();
    for (var i = 0; i < 15; i++) {
      $('<li class="calendar-year"></li>').attr('abbr', startYear + i).html(opts.yearFmt(startYear + i)).appendTo($ul);
    }
    $(target).find('.calendar-title .year-range').html(opts.yearFmt(startYear) + ' - ' + opts.yearFmt(startYear + 14));

    if ($ul.find('.date-year-this').attr('abbr') !== opts.year) {
      $ul.find('.date-year-this').removeClass('date-year-this');
      $ul.find('li[abbr="' + opts.year + '"]').addClass('date-year-this');
    }
  }

  //显示月份
  function showSelectMonth(target) {
    var opts = $.data(target, 'calendar').options;

    restSelect(target);

    $(target).find('.calendar-prevmonth').hide();
    $(target).find('.calendar-nextmonth').hide();

    var $ul = $(target).find('.date-month-list');
    $ul.show();

    if ($ul.is(':empty')) {
      $ul.empty();
      for (var i = 0; i < 12; i++) {
        $('<li class="calendar-month"></li>').attr('abbr', i + 1).html(opts.months[i]).appendTo($ul);
      }
    }

    if ($ul.find('.date-month-this').attr('abbr') !== opts.month) {
      $ul.find('.date-month-this').removeClass('date-month-this');
      $ul.find('li[abbr="' + opts.month + '"]').addClass('date-month-this');
    }
  }

  //显示时间
  function showSelectTime(target) {
    var opts = $.data(target, 'calendar').options;

    restSelect(target);
    $(target).find('.calendar-prevmonth').hide();
    $(target).find('.calendar-nextmonth').hide();
    $(target).find('.calendar-prevyear').hide();
    $(target).find('.calendar-nextyear').hide();

    var $ul = $(target).find('.date-time-list');
    $ul.show();
  }

  function bindEvents(target) {
    var opts = $.data(target, 'calendar').options;
    var menu = $(target).find('.calendar-menu');
    menu.find('.calendar-menu-year').unbind('.calendar').bind('keypress.calendar', function (e) {
      if (e.keyCode == 13) {
        setDate(true);
      }
    });

    //$('.add-time-list li ol li').click(function () {
    //  $(this).addClass('date-this').siblings().removeClass('date-this');
    //});
    //$('.add-time-list li ol li:nth-child(1)').addClass('date-this');

    $(target)
      .unbind('.calendar')
      .bind('mouseover.calendar', function (e) {
        var t = toTarget(e.target);
        if (t.hasClass('calendar-nav') || t.hasClass('calendar-text') || (t.hasClass('calendar-day') && !t.hasClass('calendar-disabled'))) {
          t.addClass('calendar-nav-hover');
        }
      })
      .bind('mouseout.calendar', function (e) {
        var t = toTarget(e.target);
        if (t.hasClass('calendar-nav') || t.hasClass('calendar-text') || (t.hasClass('calendar-day') && !t.hasClass('calendar-disabled'))) {
          t.removeClass('calendar-nav-hover');
        }
      })
      .bind('click.v-mm', function (e) {
        console.log('hh', $(e.target).html());
      })
      .bind('click.calendar', function (e) {
        var t = toTarget(e.target);

        if (t.hasClass('dateYear')) {
          //点击年份
          opts.startYear = opts.year - 7;
          showSelectYear(target);

        } else if (t.hasClass('dateMonth')) {
          //点击月份
          showSelectMonth(target);
          //showSelectTime(target);

        } else if (t.hasClass('calendar-menu-next') || t.hasClass('calendar-nextyear')) {
          //下一年
          if ($(target).find('.date-year-list').is(':visible')) {
            //下15年
            opts.startYear += 15;
            showSelectYear(target);

          } else {
            showYear(1);
          }

        } else if (t.hasClass('calendar-menu-prev') || t.hasClass('calendar-prevyear')) {
          //上一年
          if ($(target).find('.date-year-list').is(':visible')) {
            //上15年
            opts.startYear -= 15;
            showSelectYear(target);

          } else {
            showYear(-1);
          }

        } else if (t.hasClass('calendar-prevmonth')) {
          //上个月
          showMonth(-1);

        } else if (t.hasClass('calendar-nextmonth')) {
          //下个月
          showMonth(1);

        } else if (t.hasClass('calendar-month')) {
          //月份
          $(target).find('.date-month-list').find('.date-month-this').removeClass('date-month-this');
          t.addClass('date-month-this');
          setDate(true);

        } else if (t.hasClass('calendar-year')) {
          //年份
          $(target).find('.date-year-list').find('.date-year-this').removeClass('date-year-this');
          t.addClass('date-year-this');
          setDate(true);

        } else if (t.hasClass('calendar-day')) {
          //选择了日期
          if (t.hasClass('calendar-disabled')) {
            return;
          }
          var oldValue = opts.current;
          t.closest('div.calendar-body').find('.calendar-selected').removeClass('calendar-selected');
          t.addClass('calendar-selected');
          var parts = t.attr('abbr').split(',');
          var y = parseInt(parts[0]);
          var m = parseInt(parts[1]);
          var d = parseInt(parts[2]);
          opts.current = new Date(y, m - 1, d);
          opts.onSelect.call(target, opts.current);
          if (!oldValue || oldValue.getTime() != opts.current.getTime()) {
            opts.onChange.call(target, opts.current, oldValue);
          }
          if (opts.year !== y || opts.month !== m) {
            opts.year = y;
            opts.month = m;
            show(target);
          }
        }
      });

    function toTarget(t) {
      var day = $(t).closest('.calendar-day');
      if (day.length) {
        return day;
      } else {
        return $(t);
      }
    }

    function setDate(hideMenu) {
      var opts = $.data(target, 'calendar').options;
      var $yearUl = $(target).find('.date-year-this');
      var $monthUl = $(target).find('.date-month-this');

      var year = $yearUl.attr('abbr') || opts.year;
      var month = $monthUl.attr('abbr') || opts.month;
      if (!isNaN(year)) {
        opts.year = parseInt(year);
        opts.month = parseInt(month);
        show(target);
      }
      if (hideMenu) {
        restSelect(target);
      }
    }

    function showYear(delta) {
      opts.year += delta;
      show(target);
      menu.find('.calendar-menu-year').val(opts.year);
    }

    function showMonth(delta) {
      opts.month += delta;
      if (opts.month > 12) {
        opts.year++;
        opts.month = 1;
      } else if (opts.month < 1) {
        opts.year--;
        opts.month = 12;
      }
      show(target);

      var $ul = menu.parent().find('.date-month-list');
      if ($ul.find('.date-month-this').attr('abbr') !== opts.month) {
        $ul.find('.date-month-this').removeClass('date-month-this');
        $ul.find('li[abbr="' + opts.month + '"]').addClass('date-month-this');
      }
    }
  }

  /**
   * get weeks data.
   */
  function getWeeks(target, year, month) {
    var opts = $.data(target, 'calendar').options;
    var dates = [];
    var lastDay = new Date(year, month, 0).getDate();
    for (var i = 1; i <= lastDay; i++) dates.push([year, month, i]);

    // group date by week
    var weeks = [], week = [];
    var memoDay = -1;
    while (dates.length > 0) {
      var date = dates.shift();
      week.push(date);
      var day = new Date(date[0], date[1] - 1, date[2]).getDay();
      if (memoDay == day) {
        day = 0;
      } else if (day == (opts.firstDay == 0 ? 7 : opts.firstDay) - 1) {
        weeks.push(week);
        week = [];
      }
      memoDay = day;
    }
    if (week.length) {
      weeks.push(week);
    }

    var firstWeek = weeks[0];
    if (firstWeek.length < 7) {
      while (firstWeek.length < 7) {
        var firstDate = firstWeek[0];
        var date = new Date(firstDate[0], firstDate[1] - 1, firstDate[2] - 1);
        firstWeek.unshift([date.getFullYear(), date.getMonth() + 1, date.getDate()]);
      }
    } else {
      var firstDate = firstWeek[0];
      var week = [];
      for (var i = 1; i <= 7; i++) {
        var date = new Date(firstDate[0], firstDate[1] - 1, firstDate[2] - i);
        week.unshift([date.getFullYear(), date.getMonth() + 1, date.getDate()]);
      }
      weeks.unshift(week);
    }

    var lastWeek = weeks[weeks.length - 1];
    while (lastWeek.length < 7) {
      var lastDate = lastWeek[lastWeek.length - 1];
      var date = new Date(lastDate[0], lastDate[1] - 1, lastDate[2] + 1);
      lastWeek.push([date.getFullYear(), date.getMonth() + 1, date.getDate()]);
    }
    if (weeks.length < 6) {
      var lastDate = lastWeek[lastWeek.length - 1];
      var week = [];
      for (var i = 1; i <= 7; i++) {
        var date = new Date(lastDate[0], lastDate[1] - 1, lastDate[2] + i);
        week.push([date.getFullYear(), date.getMonth() + 1, date.getDate()]);
      }
      weeks.push(week);
    }

    return weeks;
  }

  /**
   * show the calendar day.
   */
  function show(target) {
    var opts = $.data(target, 'calendar').options;
    if (opts.current && !opts.validator.call(target, opts.current)) {
      opts.current = null;
    }

    var now = new Date();
    var todayInfo = now.getFullYear() + ',' + (now.getMonth() + 1) + ',' + now.getDate();
    var currentInfo = opts.current ? (opts.current.getFullYear() + ',' + (opts.current.getMonth() + 1) + ',' + opts.current.getDate()) : '';
    // calulate the saturday and sunday index
    var saIndex = 6 - opts.firstDay;
    var suIndex = saIndex + 1;
    if (saIndex >= 7) saIndex -= 7;
    if (suIndex >= 7) suIndex -= 7;

    //$(target).find('.calendar-title span').html(opts.months[opts.month - 1] + ' ' + opts.year);
    $(target).find('.calendar-title .date-set .dateYear').html(opts.yearFmt(opts.year));
    $(target).find('.calendar-title .date-set .dateMonth').html(opts.months[opts.month - 1]);

    var body = $(target).find('div.calendar-body');
    body.children('table').remove();

    var data = ['<table class="calendar-dtable" cellspacing="0" cellpadding="0" border="0">'];
    data.push('<thead><tr>');
    if (opts.showWeek) {
      data.push('<th class="calendar-week">' + opts.weekNumberHeader + '</th>');
    }
    for (var i = opts.firstDay; i < opts.weeks.length; i++) {
      data.push('<th>' + opts.weeks[i] + '</th>');
    }
    for (var i = 0; i < opts.firstDay; i++) {
      data.push('<th>' + opts.weeks[i] + '</th>');
    }
    data.push('</tr></thead>');

    data.push('<tbody>');
    var weeks = getWeeks(target, opts.year, opts.month);
    for (var i = 0; i < weeks.length; i++) {
      var week = weeks[i];
      var cls = '';
      if (i == 0) {
        cls = 'calendar-first';
      }
      else if (i == weeks.length - 1) {
        cls = 'calendar-last';
      }
      data.push('<tr class="' + cls + '">');
      if (opts.showWeek) {
        var weekNumber = opts.getWeekNumber(new Date(week[0][0], parseInt(week[0][1]) - 1, week[0][2]));
        data.push('<td class="calendar-week">' + weekNumber + '</td>');
      }
      for (var j = 0; j < week.length; j++) {
        var day = week[j];
        var s = day[0] + ',' + day[1] + ',' + day[2];
        var dvalue = new Date(day[0], parseInt(day[1]) - 1, day[2]);
        var d = opts.formatter.call(target, dvalue);
        var css = opts.styler.call(target, dvalue);
        var classValue = '';
        var styleValue = '';
        if (typeof css == 'string') {
          styleValue = css;
        } else if (css) {
          classValue = css['class'] || '';
          styleValue = css['style'] || '';
        }

        var cls = 'calendar-day';
        if (!(opts.year == day[0] && opts.month == day[1])) {
          cls += ' calendar-other-month';
        }
        if (s == todayInfo) {
          cls += ' calendar-today';
        }
        if (s == currentInfo) {
          cls += ' calendar-selected';
        }
        if (j == saIndex) {
          cls += ' calendar-saturday';
        }
        else if (j == suIndex) {
          cls += ' calendar-sunday';
        }
        if (j == 0) {
          cls += ' calendar-first';
        }
        else if (j == week.length - 1) {
          cls += ' calendar-last';
        }

        cls += ' ' + classValue;
        if (!opts.validator.call(target, dvalue)) {
          cls += ' calendar-disabled';
        }

        data.push('<td class="' + cls + '" abbr="' + s + '" style="' + styleValue + '">' + d + '</td>');
      }
      data.push('</tr>');
    }
    data.push('</tbody>');
    data.push('</table>');

    body.append(data.join(''));
    body.children('table.calendar-dtable').prependTo(body);

    resetTimePanel(target);

    opts.onNavigate.call(target, opts.year, opts.month);
  }

  $.fn.calendar = function (options, param) {
    if (typeof options == 'string') {
      return $.fn.calendar.methods[options](this, param);
    }

    options = options || {};
    return this.each(function () {
      var state = $.data(this, 'calendar');
      if (state) {
        $.extend(state.options, options);
      } else {
        state = $.data(this, 'calendar', {
          options: $.extend({}, $.fn.calendar.defaults, $.fn.calendar.parseOptions(this), options)
        });
        init(this);
      }
      if (state.options.border == false) {
        $(this).addClass('calendar-noborder');
      }
      setSize(this);
      bindEvents(this);
      show(this);
      //$(this).find('.calendar-menu').hide();	// hide the calendar menu
    });
  };

  $.fn.calendar.methods = {
    options: function (jq) {
      return $.data(jq[0], 'calendar').options;
    },
    resize: function (jq, param) {
      return jq.each(function () {
        setSize(this, param);
      });
    },
    moveTo: function (jq, date) {
      return jq.each(function () {
        if (!date) {
          var now = new Date();
          $(this).calendar({
            year: now.getFullYear(),
            month: now.getMonth() + 1,
            current: date
          });
          return;
        }
        var opts = $(this).calendar('options');
        if (opts.validator.call(this, date)) {
          var oldValue = opts.current;
          $(this).calendar({
            year: date.getFullYear(),
            month: date.getMonth() + 1,
            current: date
          });
          if (!oldValue || oldValue.getTime() != date.getTime()) {
            opts.onChange.call(this, opts.current, oldValue);
          }
        }
      });
    }
  };

  $.fn.calendar.parseOptions = function (target) {
    var t = $(target);
    return $.extend({}, $.parser.parseOptions(target, [
      'weekNumberHeader', {firstDay: 'number', fit: 'boolean', border: 'boolean', showWeek: 'boolean'}
    ]));
  };

  $.fn.calendar.defaults = {
    width: 272,
    height: 284,
    showTime: false,
    fit: false,
    border: true,
    showWeek: false,
    firstDay: 1,
    weeks: ['日', '一', '二', '三', '四', '五', '六'],
    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    //weeks: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    //months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
    current: (function () {
      var d = new Date();
      return new Date(d.getFullYear(), d.getMonth(), d.getDate());
    })(),
    weekNumberHeader: '周次',
    getWeekNumber: function (date) {
      var checkDate = new Date(date.getTime());
      checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
      var time = checkDate.getTime();
      checkDate.setMonth(0);
      checkDate.setDate(1);
      return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
    },
    yearFmt: function (v) {
      return v + '年';
    },

    formatter: function (date) {
      return date.getDate();
    },
    styler: function (date) {
      return '';
    },
    validator: function (date) {
      return true;
    },

    onSelect: function (date) {
    },
    onChange: function (newDate, oldDate) {
    },
    onNavigate: function (year, month) {
    }
  };
})(jQuery);