/** * 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( '
' + '
' + '
' + '
' + '
' + '
' + '
' + '
' + ' ' + ' ' + '
' + '
' + '
' + '
' + '
' ); var html = []; for (var i = 0; i < 24; i++) {//时 if (i < 10) { html.push('
  • 0' + i + '
  • '); } else { html.push('
  • ' + i + '
  • '); } } $(target).find('.add-time-list .v-hh').html(html.join('')); html = []; for (var i = 0; i < 60; i++) {//分-秒 if (i < 10) { html.push('
  • 0' + i + '
  • '); } else { html.push('
  • ' + i + '
  • '); } } $(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++) { $('
  • ').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++) { $('
  • ').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 = ['']; data.push(''); if (opts.showWeek) { data.push(''); } for (var i = opts.firstDay; i < opts.weeks.length; i++) { data.push(''); } for (var i = 0; i < opts.firstDay; i++) { data.push(''); } data.push(''); data.push(''); 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(''); if (opts.showWeek) { var weekNumber = opts.getWeekNumber(new Date(week[0][0], parseInt(week[0][1]) - 1, week[0][2])); data.push(''); } 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(''); } data.push(''); } data.push(''); data.push('
    ' + opts.weekNumberHeader + '' + opts.weeks[i] + '' + opts.weeks[i] + '
    ' + weekNumber + '' + d + '
    '); 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);