由于经常用到选择日期的组件,因此特自己封装了一个日历组件。效果图如下:
项目目录结构如下:
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>