分析在注释中,路过者可以点拨一二
插件不是自己写的,作者很棒,而且后期好像更新了插件,先分析这个第一版
; (function (undefined) {
var _global;
//工具函数
//配置合并
function extend(def, opt, override) {
// for in 遍历对象的属性
for (var k in opt) {
// Object的hasOwnProperty()方法返回一个布尔值,判断对象是否包含特定的自身(非继承)属性。
// https://www.cnblogs.com/weiqinl/p/8683207.html
// 判断对象的k属性是否为自身属性 也就是判断属性是否是传参过来的,将是传入过来的对象属性赋值给def
// def是传过来的空对象 ,最后一个override没有实际作用,要么就是是否检查,为true就是不检查
if (opt.hasOwnProperty(k) && (!def.hasOwnProperty(k) || override)) {
def[k] = opt[k]
}
}
return def;
}
//日期格式化
function concatDate(y, m, d) {
var symbol = '-';
if (m) {
//判断月份是否个位数,是个位数就前面加0
m = (m.toString())[1] ? m : '0' + m;
}
if (d) {
//判断日是否个位数,是个位数就前面加0
d = (d.toString())[1] ? d : '0' + d;
}
return y + (m ? symbol + m : '') + (d ? symbol + d : '');
}
//得到时间戳
function getTimeStamp(d) {
var date = new Date(d);
if (isNaN(date.getTime())) {
console.error(d + ' is invalid date');
return '';
}
return date.getTime();
}
//polyfill 不知道这个放这里什么作用
if (!Array.isArray) {
Array.isArray = function (arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
};
}
//过滤非日期,格式化日期
//arr 为时间数组
function filterDate(arr) {
// 判断传入的是否为数组,不是返回空数组
if(!Array.isArray(arr)) {
return [];
}
arr = arr || []; //是不是多余?
var dateArr = [];
// 遍历传入的时间数组,数组中的每个值都是一个时间
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
// 将时间字符串转换为标准时间格式
// Mon Aug 20 2018 00:00:00 GMT+0800 (中国标准时间)
var date = new Date(item);
if (isNaN(date.getTime())) {
console.error(item + ' is invalid date')
} else {
var y = date.getFullYear();
var m = date.getMonth();
var d = date.getDate();
var dateStr = concatDate(y, m + 1, d);
//console.log(typeof dateStr)
// 没太明白,是否意思是将字符串日志转换为了常规日期?
// 但是concatDate后,不又把日期拼接为字符串了吗,要么就是起到过滤非日期的功能
dateArr.push(dateStr);
}
}
return dateArr;
}
function Schedule(opt) {
var def = {},
opt = extend(def, opt, true),
// 判断有没有传入自定义日历开始时间,如果没有就设置为当前时间
curDate = opt.date ? new Date(opt.date) : new Date(),
// 传入的是灰色日期数组(禁用的日期) 过滤非日期,得到的是一个日期字符串数组,格式为2011-01-22
disabledDate = opt.disabledDate ? filterDate(opt.disabledDate) : [],
// 功能同上 (选中的日期)
selectedDate = opt.selectedDate ? filterDate(opt.selectedDate) : [],
//传入(禁用此日期之前) 得到一个时间戳
disabledBefore = opt.disabledBefore ? getTimeStamp(opt.disabledBefore) : '',
//同上,传入的是(禁用此日期之后)
disabledAfter = opt.disabledAfter ? getTimeStamp(opt.disabledAfter) : '',
//传入一个布尔值,默认为true
showToday = opt.showToday,
// 获取传入日期的年月日,或者是当前日期的年月日,有两个变量重复了,继续看
year = curDate.getFullYear(),
month = curDate.getMonth(),
currentYear = curDate.getFullYear(),
currentMonth = curDate.getMonth(),
currentDay = curDate.getDate(),
activeDate = '',
//el为传入的前台dom节点
el = document.querySelector(opt.el) || document.querySelector('body'),
_this = this;
//创建日历上方切换上下月份和上下年份的事件
var bindEvent = function () {
el.addEventListener('click', function (e) {
switch (e.target.id) {
case 'nextMonth':
_this.nextMonthFun();
break;
case 'nextYear':
_this.nextYearFun();
break;
case 'prevMonth':
_this.prevMonthFun();
break;
case 'prevYear':
_this.prevYearFun();
break;
case 'todayBtn':
_this.renderToday();
break;
default:
break;
};
//判断点击的dom是否包含currentDate属性,没看到有什么意义
if (e.target.className.indexOf('currentDate') > -1) {
activeDate = e.target.title;
opt.clickCb && opt.clickCb(activeDate);
render();
}
}, false)
}
//一系列的dom写入操作
var init = function () {
var scheduleHd = '<div class="schedule-hd">' +
'<div>' +
'<span class="arrow icon iconfont icon-116leftarrowheads" id="prevYear" ></span>' +
'<span class="arrow icon iconfont icon-112leftarrowhead" id="prevMonth"></span>' +
'</div>' +
'<div class="today"></div>' +
'<div>' +
'<span class="arrow icon iconfont icon-111arrowheadright" id="nextMonth"></span>' +
'<span class="arrow icon iconfont icon-115rightarrowheads" id="nextYear"></span>' +
'</div>' +
'</div>'
var scheduleWeek = '<ul class="week-ul ul-box">' +
'<li>日</li>' +
'<li>一</li>' +
'<li>二</li>' +
'<li>三</li>' +
'<li>四</li>' +
'<li>五</li>' +
'<li>六</li>' +
'</ul>'
var scheduleBd = '<ul class="schedule-bd ul-box" ></ul>';
var todayBtn = '<div id="todayBtn" class="today">今天</div>'
// 写入到el dom中
el.innerHTML = scheduleHd + scheduleWeek + scheduleBd + (showToday ? todayBtn : '');
bindEvent(); //其实可以把el的监听事件直接搬过来。
render();
}
var render = function () {
var fullDay = new Date(year, month + 1, 0).getDate(), //当月总天数
startWeek = new Date(year, month, 1).getDay(), //当月第一天是周几
total = (fullDay + startWeek) % 7 == 0 ? (fullDay + startWeek) : fullDay + startWeek + (7 - (fullDay + startWeek) % 7),//元素总个数
lastMonthDay = new Date(year, month, 0).getDate(), //上月最后一天
eleTemp = [];
for (var i = 0; i < total; i++) {
var nowDate = concatDate(year, month + 1, (i + 1 - startWeek));
var nowTimestamp = new Date(nowDate).getTime();
var isDisbale = disabledDate.indexOf(nowDate) > -1;
var isSelected = selectedDate.indexOf(nowDate) > -1;
if (i < startWeek) {
eleTemp.push('<li class="other-month"><span class="dayStyle">' + (lastMonthDay - startWeek + 1 + i) + '</span></li>')
} else if (i < (startWeek + fullDay)) {
var addClass = '';
if (isDisbale) {
addClass = 'disabled'
} else {
isSelected && (addClass = 'selected-style');
activeDate == nowDate && (addClass = 'active-style');
concatDate(currentYear, currentMonth + 1, currentDay) == nowDate && (addClass = 'today-flag');
}
if (disabledBefore && nowTimestamp < disabledBefore) {
addClass = 'disabled'
}
if (disabledAfter && nowTimestamp > disabledAfter) {
addClass = 'disabled'
}
eleTemp.push('<li class="current-month" ><span title=' + nowDate + ' class="currentDate dayStyle ' + addClass + '">' + (i + 1 - startWeek) + '</span></li>')
} else {
eleTemp.push('<li class="other-month"><span class="dayStyle">' + (i + 1 - (startWeek + fullDay)) + '</span></li>')
}
}
el.querySelector('.schedule-bd').innerHTML = eleTemp.join('');
el.querySelector('.today').innerHTML = concatDate(year, month + 1);
};
// 切换上下月份和上下年份的事件的方法
this.nextMonthFun = function () {
if (month + 1 > 11) {
year += 1;
month = 0;
} else {
month += 1;
}
render();
opt.nextMonthCb && opt.nextMonthCb(year, month + 1);
};
this.nextYearFun = function () {
year += 1;
render();
opt.nextYeayCb && opt.nextYeayCb(year, month + 1);
};
this.prevMonthFun = function () {
if (month - 1 < 0) {
year -= 1;
month = 11;
} else {
month -= 1;
}
render();
opt.prevMonthCb && opt.prevMonthCb(year, month + 1);
};
this.prevYearFun = function () {
year -= 1;
render();
opt.prevYearCb && opt.prevYearCb(year, month + 1);
}
this.renderToday = function () {
if (year === currentYear && month === currentMonth) {
return;
}
year = currentYear;
month = currentMonth;
render();
}
init(); //do do do
}
//将插件暴露给全局对象 常规的script引入的话,直接returun出去,或者用window传出也是一样
_global = (function () { return this || (0, eval)('this') }());
if (typeof module !== 'undefined' && module.exports) {
module.exports = Schedule;
} else if (typeof define === "function" && define.amd) {
define(function () {
return Schedule;
})
} else {
!('Schedule' in _global) && (_global.Schedule = Schedule);
}
}());
前端
<div id='schedule-box' class="boxshaw">
</div>
<div>
<h3 id='h3Ele'></h3>
</div>
<script>
var mySchedule = new Schedule({
el: '#schedule-box', //容器元素
date: '2018-09-20', //当前日期
disabledBefore: '2018-07-10', //禁用此日期之前
disabledAfter: '2018-11-15', //禁用此日期之后
disabledDate: ['2018-8-20', '2018-8-2', '2018-8-23'], //禁用的日期
selectedDate: ['2018-10-21', '2018-10-22', '2018-10-23'], //选中的日期
showToday: true, //回到今天
clickCb: function (date) {
document.querySelector('#h3Ele').innerHTML = '日期:' + date
},
nextMonthCb: function (currentYear, currentMonth) {
console.log('currentYear:' + currentYear, 'currentMonth:' + currentMonth)
},
nextYeayCb: function (currentYear, currentMonth) {
console.log('currentYear:' + currentYear, 'currentMonth:' + currentMonth)
},
prevMonthCb: function (currentYear, currentMonth) {
console.log('currentYear:' + currentYear, 'currentMonth:' + currentMonth)
},
prevYearCb: function (currentYear, currentMonth) {
console.log('currentYear:' + currentYear, 'currentMonth:' + currentMonth)
}
});
</script>