自己写的日期渲染，跟老师讲的不太一样，可以运行，请大家指教
来源：4-1 数据渲染
ThinkSummer
2017-06-14 12:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>DatePicker-日期选择器</title>
<link href="./../_libs/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="./../_libs/animate/animate.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet" >
</head>
<body>
<div>
<div>
<div>
<div data-date=""></div>
</div>
<div>
<div data-date="2019-16-9"></div>
</div>
<div>
<div data-date="1997-12-17"></div>
</div>
</div>
</div>
<script src="./../_libs/jQuery/jquery-3.1.0.js"></script>
<script src="./../_libs/jQuery/jquery-migrate-3.0.0.js"></script>
<script src="./js/date.js"></script>
<script>
$(function(){
$('.ui-datepicker-wrap').datePicker();
});
</script>
</body>
</html>
js部分
(function($){
'use surict';
function Picker(el, date) {
this.dom = $(el);
let arr = date.split('-');
if (arr[0] && arr[1] && arr[2]) {
this.year = arr[0];
this.month = arr[1];
this.day = self.day = arr[2];
this.time = new Date(this.year, this.month-1, this.day);
this.week = this.time.getDay();
} else {
this.time = new Date();
this.year = this.time.getFullYear();
this.month = this.time.getMonth() + 1;
this.week = this.time.getDay();
this.day = self.day = this.time.getDate();
}
this.str_time = this.time.toLocaleDateString();
this.html = `<div class="ui-datepicker-header"><a href="#" class="ui-datepicker-btn ui-datepicker-prev-btn"><</a><span class="ui-datepicker-curr-month">${this.str_time}</span><a href="#" class="ui-datepicker-btn ui-datepicker-next-btn">></a></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>`;
this.get_other_date();
this.render_dom();
}
Picker.prototype = {
get_other_date : function() {
this.f_day = new Date(this.year, this.month-1, 1);
// 月初肯定是1号 不用算
this.f_week = this.f_day.getDay();
this.l_day = new Date(this.year, this.month, 0);
this.l_date = this.l_day.getDate(); // 本月最后一天
this.l_week = this.l_day.getDay();
},
render_dom : function() {
dateArr = new Array();
if (this.f_week === 0) {
this.f_week = 7;
}
for (let i = 0; i < (this.f_week-1); i++) {
dateArr.push(null);
}
for (let i = 1; i <= this.l_date; i++) {
dateArr.push(i);
}
for (let i = 0; i < (7-this.l_week); i++) {
dateArr.push(null);
}
// console.log(7-this.l_week);
let the_day = this.day;
let html = '';
$(dateArr).each(function(id, val) {
id++;
if (id%7 == 1) {
html += `<tr>`;
}
if (val==null) {
html += `<td></td>`;
} else {
if (val != the_day) {
html += `<td>${val}</td>`;
if (id%7 == 0) {
html += `</tr>`;
}
} else {
html += `<td class="selected_day">${val}</td>`;
if (id%7 == 0) {
html += `</tr>`;
}
}
}
});
this.html += html;
this.html += `</tbody></table></div><div class="ui-datepicker-footer"></div>`;
this.dom.html(this.html);
}
}
$.fn.extend({
datePicker : function() {
$(this).each(function(i, el) {
let date = $(el).data('date');
picker = new Picker(el, date);
});
}
});
})(jQuery);
写回答
关注
1回答
-
- ThinkSummer
- 2017-06-14 12:35:59
不知道html里的.ui-datepicker-wrap为什么被过滤去了
这是保存在GitHub上的练习题 https://github.com/summertreechina/iMooc.Notes/tree/master/Frontend/DatePicker
DatePicker组件开发
使用原生JS完成一个日期选择器（datepicker）组件的开发
17739 学习 · 67 问题
相似问题