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">&lt;</a>'?+
????????????'<a?href="#"?class="ui-datepicker-btn?ui-datepicker-next-btn">&gt;</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);