百度前端学院之听UI组件之日历组件2
前言
昨天写的是最基础的，还有些功能没加进去，比如左右按钮跳转上一年下一年,比如对指定输入框绑定日历组件等等。今天早起将其完成。
正文
看下新增的需求:
日期选择面板默认隐藏，会显示一个日期显示框和一个按钮，点击这两个部分，会浮出日历面板。再点击则隐藏。
点击选择具体日期后，面板隐藏，日期显示框中显示选取的日期
增加一个接口，用于当用户选择日期后的回调处理
效果图如上。需要新加的一个是对输入框的offsetLeft offsetTop获取并重新设定组件的位置，达到一种点击输入框就能让组件在其正下方显示。
然后因为要用户自己添加回调处理，这样我们之间将其写成一个config传入到组件，然后判断传入的fn是否为function即可。
来看下我们新版的js代码：
window.onload = function() {
var config = {
minYear: 2001,
maxYear: 2025,
year: 2017,
mouth: 6,
fn: function() {
console.log("2333");
},
};
datePickerFactory('datePlugin',config);
function datePickerFactory(target,config) {
var datePickerFactory = {
Config: {
minYear: config.minYear || 2000,
maxYear: config.maxYear || 2024,
year: config.year || 5 ,
mouth: config.mouth || 7
},
//绑定年份和月份选择事件
bindSelect: function() {
var that = this;
var yearPicker = document.querySelector(".yearPicker");
var selectYear = document.querySelector(".selectYear");
yearPicker.addEventListener('click', function(e) {
if (yearPicker.className.indexOf('active') != -1) {
yearPicker.className = 'datePicker-select yearPicker';
} else {
yearPicker.className = 'datePicker-select yearPicker active';
}
}, false);
selectYear.addEventListener('click', function(e) {
document.querySelector(".currYear").innerText = e.target.innerText;
that.Config.year = e.target.innerText;
yearPicker.className = 'datePicker-select yearPicker active';
that.renderContent(that.getWeek(), that.getdate());
}, false);
var mouthPicker = document.querySelector(".mouthPicker");
var selectMouth = document.querySelector(".selectMouth");
mouthPicker.addEventListener('click', function(e) {
if (mouthPicker.className.indexOf('active') != -1) {
mouthPicker.className = 'datePicker-select mouthPicker';
} else {
mouthPicker.className = 'datePicker-select mouthPicker active';
}
}, false);
selectMouth.addEventListener('click', function(e) {
document.querySelector(".currMouth").innerText = e.target.innerText;
that.Config.mouth = e.target.innerText;
mouthPicker.className = 'datePicker-select mouthPicker active';
that.renderContent(that.getWeek(), that.getdate());
}, false);
},
//渲染日历列表
renderContent: function(weekDay, mouthDay) {
var dateContent = document.querySelector(".dateContent");
dateContent.innerHTML = '';
//创建空的日期占位
for (var i = 0; i < weekDay; i++) {
var li = document.createElement("li");
var a = document.createElement("a");
a.innerHTML = '';
li.appendChild(a);
dateContent.appendChild(li);
}
//正常日期
for (var j = 1; j <= mouthDay; j++) {
var li = document.createElement("li");
var a = document.createElement("a");
a.innerHTML = j;
li.appendChild(a);
dateContent.appendChild(li);
}
},
//根据最大最小年份生成列表
initYear: function() {
var that = this;
var selectYear = document.querySelector(".selectYear");
for (var i = that.Config.minYear; i <= that.Config.maxYear; i++) {
var li = document.createElement("li");
var a = document.createElement("a");
a.innerHTML = i;
li.appendChild(a);
selectYear.appendChild(li);
}
},
//确定某个月的第一天是星期几
getWeek: function() {
var that = this;
var thisDay = new Date();
var thisYear = parseInt(that.Config.year);
var thisMouth = parseInt(that.Config.mouth);
//setFullYear() 方法用于设置指定年份和月份。月份从0开始计数
thisDay.setFullYear(thisYear, thisMouth - 1, 1);
//getDay() 方法可返回表示星期的某一天的数字。
var weekDay = thisDay.getDay();
return weekDay;
},
//某个月有多少天
getdate: function() {
var that = this;
var thisYear = parseInt(that.Config.year);
var mouth = parseInt(that.Config.mouth);
if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12) {
return 31;
} else if (mouth == 4 || mouth == 6 || mouth == 9 || mouth == 11) {
return 30;
} else if ((thisYear % 100 != 0 && thisYear % 4 == 0) || thisYear % 400 == 0) {
return 29;
} else {
return 28;
}
},
//提供标准输出接口
getFormatDate: function() {
var that = this;
var dateContent = document.querySelector(".dateContent");
dateContent.addEventListener('click', function(e) {
if (e.currentTarget != e.target) { //这句是为了防止多选日期的时候产生bug
var formatDate = that.Config.year + '-' + that.Config.mouth + '-' + e.target.innerText;
var input = document.querySelector("." + target);
input.value = formatDate;
e.target.className = 'active';
that.toggle();
//执行回调
if(typeof(config.fn)=="function"){
config.fn();
}
}
}, false);
},
//绑定插件到指定输入框
bindInput: function() {
var that = this;
var input = document.querySelector("." + target);
//调整位置对应输入框底部
var left = input.offsetLeft;
var top = input.offsetTop;
document.querySelector(".datePicker").style.left = left + 'px';
input.addEventListener('click', function(e) {
that.toggle();
}, false);
},
//绑定上一年/下一年事件
preNext:function(){
var that = this;
var pre = document.querySelector(".datePicker-pre");
var next = document.querySelector(".datePicker-next");
var currYear = document.querySelector(".currYear");
pre.addEventListener('click', function(e) {
if(parseInt(currYear.innerText) -1 >= that.Config.minYear){
currYear.innerText = parseInt(currYear.innerText) - 1;
that.Config.year = currYear.innerText;
that.renderContent(that.getWeek(), that.getdate()); //重新渲染
}
}, false);
next.addEventListener('click', function(e) {
if(parseInt(currYear.innerText) +1 <= that.Config.maxYear){
currYear.innerText = parseInt(currYear.innerText) + 1;
that.Config.year = currYear.innerText;
that.renderContent(that.getWeek(), that.getdate());//重新渲染
}
}, false);
},
//显示/隐藏日历
toggle: function() {
var datePicker = document.querySelector(".datePicker");
if (datePicker.className.indexOf('show') != -1) {
datePicker.className = 'datePicker';
} else {
datePicker.className = 'datePicker show';
}
},
//初始化插件
init: function() {
var that = this;
document.querySelector(".currYear").innerText = that.Config.year;
that.initYear();
that.bindInput();
that.bindSelect();
that.preNext();
that.renderContent(that.getWeek(), that.getdate());
that.getFormatDate();
}
}
return datePickerFactory.init();
}
}
基本上注释都写的很全了。然后可以继续下一环节。