                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /DatePicker组件开发

求大佬帮忙看一下哪里错了QAQ，老是报错说：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');//这就是报错的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);
}
});