由于经常用到选择日期的组件，因此特自己封装了一个日历组件。效果图如下：
项目目录结构如下：
DateComponent.css代码如下：
#dateBoardTitle tr td{padding: 10px 0px}
#dateBoard tr td{padding:3px 0px}
#date-view{background-color:white;position:absolute;bottom:0px;left:0px;right:0px;}
#dateBoard tr td div{ width: 34px; height:34px;padding:7px 0px}
.date-selected{color:white;background-color:red;border-radius:17px;}
.date-mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 10500;background-color:rgba(0, 0, 0, 0.7);display:none}
.date-mask-display{display:block}
.date-btn{width:50%;height:40px;padding: 10px;}
DateComponent.js代码如下：
;
(function (root, factory) {
//amd
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports === 'object') { //umd
module.exports = factory($);
} else {
root.DateComponent = factory(window.Zepto || window.jQuery || $);
}
})(window, function ($) {
var DateComponent = function(defaultValues) {
this.date = defaultValues.defaultDate || new Date();
this.currentSelectedMonth = this.date.getMonth(); //当前显示的月份
this.currentSelectedYear = this.date.getFullYear(); //当前显示的年份
this.currentSelectedDate = this.date.getDate(); //当前选中的日期
this.monthDay = [31, 28 + this.isLeap(this.currentSelectedYear), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //数组中的每一项代表每个月的天数
this.dateBoardMask = null;
this.callback = defaultValues.callback || null;
this.init();
}
DateComponent.prototype = {
constructor : DateComponent, //必须指定constructor属性，否则原型链会被切断
dateBoardMaskTpl: '<div class="date-mask">'+
'<div id="date-view">'+
'<div style="padding:10px 18px;text-align:center;border-bottom:1px solid lightgrey;color:lightgrey">'+
'<i class="glyphicon glyphicon-chevron-left" style="float:left"></i>'+
'<span id="headTitle" style="color:#313f52">2018-08-10</span>'+
'<i class="glyphicon glyphicon-chevron-right" style="float:right"></i>'+
'</div>'+
'<table id = "dateBoardTitle" style="width:100%;text-align:center;">'+
'<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'+
'</table>'+
'<div style="padding-bottom:10px;background-color:#f9f9f9">'+
'<table id ="dateBoard" style="width:100%;text-align:center;"></table>'+
'</div>'+
'<div style="text-align: center;color:white">'+
'<div id="date-cancel" class="date-btn" style="float:left;background-color:black">取消</div>'+
'<div id="date-confirm" class="date-btn" style="float:right;background-color:red">确定</div>'+
'<div>'+
'</div>'+
'</div>',
getPrevMonth : function () { //获取上一个月
if(this.currentSelectedMonth === 0){
this.currentSelectedYear -= 1;
this.currentSelectedMonth = 11;
}else{
this.currentSelectedMonth -= 1;
}
var days = this.monthDay[this.currentSelectedMonth];
if(this.currentSelectedDate > days){
this.currentSelectedDate = days;
}
this.renderDateBoard(this.currentSelectedYear,this.currentSelectedMonth,this.currentSelectedDate);
},
getNextMonth : function () { //获取下一个月
if(this.currentSelectedMonth === 11){
this.currentSelectedYear += 1;
this.currentSelectedMonth = 0;
}else{
this.currentSelectedMonth += 1;
}
var days = this.monthDay[this.currentSelectedMonth];
if(this.currentSelectedDate > days){
this.currentSelectedDate = days;
}
this.renderDateBoard(this.currentSelectedYear,this.currentSelectedMonth,this.currentSelectedDate);
},
isLeap : function(year){ //判断是否为闰年
let res;
return ((year % 100 == 0) ? res = (year % 400 == 0 ? 1 : 0) : res = (year % 4 == 0) ? 1 : 0);
},
renderDateBoard : function(year,month,date){
$('#headTitle').html(year + '年' + (month + 1) + '月');
var tempDate = new Date(year, month,1);
var day = tempDate.getDay();
var board_html = '';
var i = 0;
var arr = [];
for( i = 0; i < day; i++){
arr.push('<td></td>');
}
for(i = 1 ; i < this.monthDay[month] + 1; i++){
arr.push('<td align="center"><div id="'+year+month+i+'">'+i+'</div></td>');
}
for( i = 0, len = 7 - arr.length % 7; i < len && len !== 7; i++){
arr.push("<td></td>");
}
for( i = 0 ; i < arr.length; i ++){
if(i === 0){
board_html += '<tr>' + arr[i];
}else if(i === arr.length -1){
board_html += arr[i] + '</tr>'
}else if(i % 7 === 6){
board_html += arr[i] + '</tr><tr>'
}else{
board_html += arr[i]
}
}
$("#dateBoard").html(board_html);
$('#'+year+month+date).addClass('date-selected');
},
bindEvents : function(){
var _this = this;
$(".glyphicon-chevron-left").click(function(){
_this.getPrevMonth();
})
$(".glyphicon-chevron-right").click(function(){
_this.getNextMonth();
})
$("#dateBoard").click(function(event){
var target = $(event.target);
var id = target.context.id;
if(!target.is('#dateBoard td div') || target.hasClass('date-selected')){return};// 如果点中的是已经选中的日期或者点击的区域无效，责忽略
$('.date-selected').removeClass('date-selected');
target.addClass('date-selected');
_this.currentSelectedDate = parseInt($('#'+id).html())
})
$(" #date-cancel").click(function(){
_this.cancel();
})
$(" #date-confirm").click(function(){
_this.confirm();
})
this.dateBoardMask.click(function(event){
var target = $(event.target);
if(target.is('.date-mask')){
_this.cancel();
}
})
},
init : function(){
console.log('inint');
if(!this.dateBoardMask){
this.dateBoardMask = $(this.dateBoardMaskTpl);
$('body').append(this.dateBoardMask);
}
this.dateBoardMask.toggleClass('date-mask-display')
this.renderDateBoard(this.currentSelectedYear,this.currentSelectedMonth,this.currentSelectedDate);
this.bindEvents();
},
confirm : function(){
if(this.callback){
this.callback(this.currentSelectedYear,this.currentSelectedMonth,this.currentSelectedDate);
}
this.cancel();
},
cancel : function(){
this.dateBoardMask.toggleClass('date-mask-display')
this.dateBoardMask.remove();
this.dateBoardMask = null;
}
}
return DateComponent;
});
index.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="./DateComponent.css">
</head>
<body >
<div id="select-date" style="padding:15px;text-align: center;background-color:red;color:white;margin-top:50px;">选择日期</div>
<div id = "date-label" style="padding:15px;text-align: center;background-color:green;color:white;margin-top:50px;"></div>
<script src="./DateComponent.js"></script>
<script>
var date = new Date()
var month = date.getMonth() + 1
var monthForm = month < 10 ? '0' + month : month
$('#date-label').html(date.getFullYear() + '-' + monthForm + '-' + date.getDate())
$("#select-date").click(function(){
var date = new Date($('#date-label').html());
new DateComponent({
defaultDate: date,
callback: function(year, month,date){
var monthCus = month + 1
var monthForm = monthCus < 10 ? '0' + monthCus : monthCus
$('#date-label').html(year+'-'+monthForm+'-'+date);
}
});
})
</script>
</body>
</html>