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

自己寫的日期渲染，跟老師講的不太一樣，可以運行，請大家指教

<!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">&lt;</a><span?class="ui-datepicker-curr-month">${this.str_time}</span><a?href="#"?class="ui-datepicker-btn?ui-datepicker-next-btn">&gt;</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);