function Datepicker() {
var monthDate, $wrapper, that = this;
this.getMonthDate = function (year, month) {
var ret = [];
//如果没有传入年月，则获取当前年月
if(!year || !month){
var today = new Date();
year = today.getFullYear();
month = today.getMonth() + 1;
}
//获取本月的第一天所在的年份月份日期
var firstDay = new Date(year, month - 1, 1);
year = firstDay.getFullYear();
month = firstDay.getMonth() + 1;
//判断当天是周几
var firstDayWeekDay = firstDay.getDay();
//修正星期天显示为0
if(firstDayWeekDay === 0) firstDayWeekDay = 7;
//获取上个月的最后一天
var lastDayOfLastMonth = new Date(year, month - 1, 0);
var lastDateOfLastMonth = lastDayOfLastMonth.getDate();
//获取上个月应该显示的天数
var preMonthDayCount = firstDayWeekDay - 1;
//获取当月的最后一天
var lastDay = new Date(year, month, 0);
var lastDate = lastDay.getDate();
//循环获取当前月的每一天
for(var i=0; i<42; i++){
//算出真实日期是多少(只看day 不考虑month)
var date = i - preMonthDayCount +1;
var showDate = date;
//指定当前月
var thisMonth = month;
//处理上一月与下一月
if(date <= 0){
//上一月
thisMonth = month - 1;
showDate = lastDateOfLastMonth + date;
}else if(date > lastDate){
//下一月
thisMonth = month + 1;
showDate = showDate - lastDate;
}
//修正月显示
if(thisMonth === 0) thisMonth =12;
if(thisMonth === 13) thisMonth = 1;
//返回相关数据
ret.push({
month:thisMonth,
date:date,
showDate:showDate
});
}
return {
year:year,
month:month,
days:ret
};
};
this.buildUi = function (year, month) {
monthDate = that.getMonthDate(year, month);
var html = '<div class="ui-datepicker-header">' +
'<a href="#" class="ui-datepicker-btn ui-datepicker-prev-btn"><</a>' +
'<a href="#" class="ui-datepicker-btn ui-datepicker-next-btn">></a>' +
'<span class="ui-datepicker-curr-month">'+ monthDate.year + '-' + monthDate.month + '</span>' +
'</div>' +
'<div class="ui-datepicker-body">' +
'<table>' +
'<thead>' +
'<tr>' +
'<th>一</th>' +
'<th>二</th>' +
'<th>三</th>' +
'<th>四</th>' +
'<th>五</th>' +
'<th>六</th>' +
'<th>日</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
for(var i=0; i<42; i++){
var date = monthDate.days[i];
if(i%7 === 0){
html += '<tr>';
}
var nowMonth, className;
if(Number(date.showDate) > Number(date.date)){
nowMonth = monthDate.month - 1;
className = "ui-datepicker-bggary";
}else if(date.showDate === date.date){
nowMonth = monthDate.month;
if((new Date()).getDate() === date.date && (new Date()).getMonth() + 1 === monthDate.month && (new Date()).getFullYear() === monthDate.year){
className = "ui-datepicker-bgnow";
}else {
className = "ui-datepicker-bgdefault";
}
}else {
nowMonth = monthDate.month + 1;
className = "ui-datepicker-bggary";
}
html += '<td class="'+ className +'" data-date="' + monthDate.year + '-' + nowMonth + '-' + date.showDate + '">' + date.showDate + '</td>';
if(i%7 === 6){
html += '</tr>';
}
}
html += '</tbody></table></div>';
return html;
};
this.render = function (year, month) {
var html = that.buildUi(year, month);
if(!$wrapper){
$wrapper = document.createElement("div");
$wrapper.className = "ui-datepicker-wrapper";
document.body.appendChild($wrapper);
}
$wrapper.innerHTML = html;
};
this.init = function (input, year, month) {
that.render(year, month);
var $input = document.querySelector(input);
$input.addEventListener("click",function () {
if($wrapper.classList.contains("ui-datepicker-wrapper-show")){
$wrapper.classList.remove("ui-datepicker-wrapper-show");
}else {
$wrapper.classList.add("ui-datepicker-wrapper-show");
var left = $input.offsetLeft,
top = $input.offsetTop,
height = $input.offsetHeight;
$wrapper.style.top = top +height + 2 + "px";
$wrapper.style.left = left + "px";
}
},false);
$wrapper.addEventListener("click",function (e) {
var $target = e.target;
if(!$target.classList.contains("ui-datepicker-btn")){return false}
if($target.classList.contains("ui-datepicker-prev-btn")){
//上一月
if(monthDate.month === 1){
year = monthDate.year - 1;
month = 12;
}else {
year = monthDate.year;
month = monthDate.month - 1;
}
that.render(year, month);
}else {
//下一月
if(monthDate.month === 12){
year = monthDate.year + 1;
month = 1;
}else {
year = monthDate.year;
month = monthDate.month + 1;
}
that.render(year, month);
}
});
$wrapper.addEventListener("click",function (e) {
var $target = e.target;
if($target.tagName.toLowerCase() !== "td"){return false}
if($target.classList.contains("ui-datepicker-bggary")){return false}
$input.value = $target.getAttribute("data-date");
$wrapper.classList.remove("ui-datepicker-wrapper-show");
})
}
}
var date1 = new Datepicker();
var date2 = new Datepicker();
var date3 = new Datepicker();
date1.init(".m1", 2018, 3);
date2.init(".m2", 2018, 4);
date3.init(".m3", 2018, 5);
