求大佬帮忙看一下哪里错了QAQ，老是报错说：Uncaught TypeError: datepicker.init is not a function at date.html:86
来源：4-1 数据渲染
宝慕林5387319
2020-06-30 21:14
<!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"><</a>' +
'<a href="#" class="ui-datepicker-btn ui-datepicker-next-btn">></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);
}
});
写回答
关注
2回答
-
- 慕梦前来
- 2021-12-30 20:00:12
vardatepicker = window.datepicker;要放到外面去，不然 datepicker.init =function($input) ｛。。。｝时，datepicker这时还是一个undefind没有init的方法 -
- 慕梦前来
- 2021-10-27 18:55:11
你先看一下获取的那个实例对象是什么，上面没有init的函数吧
DatePicker组件开发
使用原生JS完成一个日期选择器（datepicker）组件的开发
17743 学习 · 64 问题
相似问题