                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /DatePicker組件開發(fā)

求大佬幫忙看一下哪里錯(cuò)了QAQ，老是報(bào)錯(cuò)說：Uncaught TypeError: datepicker.init is not a function at date.html:86

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title></title>
</head>
<style?type="text/css"?src="CSS.css"></style>
<style?type="text/css">
.datepicker{
border:?1px?solid?#ccc;
border-radius:?4px;
padding:?5px;
height:?24px;
line-height:?24px;
width:?230px;
}
.datepicker:focus{
outline:?0?none;
border:?1px?solid?#1abc9c;
}
</style>
<body>
<input?type="text"?class="datepicker"?/>
<script?type="text/javascript"?src="data.js"></script>
<script?type="text/javascript"?src="new_file.js"></script>
<script?type="text/javascript">
datepicker.init('.datepicker');//這就是報(bào)錯(cuò)的data。html:86
</script>
</body>
</html>

?data.js:

(function()?{
var?datepicker?=?{};
datepicker.getMonthData?=?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);
var?firstDayWeekDay?=?firstDay.getDay();
if?(firstDayWeekDay?===?0)?firstDayWeekDay?=?7;
year?=?firstDay.getFullYear();
month?=?firstDay.getMonth()+1;
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?<?7?*?6;?i++)?{
var?date?=?i?+?1?-?preMonthDayCount;
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
};
};
window.datepicker?=?datepicker;
})();

new_file.js:

(function()?{
var?datepicker?=?window.datepicker;
datepicker.buildUi?=?function(year,?month)?{
var?monthData?=?datepicker.getMonthData(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">'?+
monthData.year?+?'-'?+?monthData.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?<?monthData.days.length;?i++)?{
var?date?=?monthData.days[i];
if?(i?%?7?===?0)?{
html?+=?'<tr>';
}
html?+=?'<td>'?+?date.showDate?+?'</tr>';
if?(i?%?7?===?6)?{
html?+=?'</tr>';
}
}
html?+=?'</tbody>'?+
'</table>'?+
'</div>';
return?html;
};
datepicker.init?=?function($input)?{
var?html?=?datepicker.buildUi();
var?$wrapper?=?document.createElement('div');
$wrapper.className?=?"ui-datepicker-wrapper";
$wrapper.innerHTML?=?html;
document.body.appendChild($wrapper);
}
});