1.HTML完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css" /> <style> .datepicker{ border: 1px solid #ccc; border-radius: 4px; padding: 5px; height: 24px; line-height: 24px; width: 230px; margin: 50px auto; display: block; } .datepicker:focus{ outline: 0 none; border: 1px solid #1abc9c; } </style> </head> <body> <input type="text" class="datepicker" /> <script src="data.js"></script> <script src="main.js"></script> <script> datepicker.init('.datepicker'); </script> </body> </html>
2.css样式如下：
.ui-datepicker-wrapper{ width: 240px; font-size: 16px; color: #666; box-shadow: 2px 2px 8px 2px rgba(128, 128, 128, 0.3); display: none; position: absolute; } .ui-datepicker-wrapper-show{ display: block; } .ui-datepicker-wrapper .ui-datepicker-header{ padding: 0 20px; height: 50px; line-height: 50px; text-align: center; background: #f0f0f0; border-bottom: 1px solid #ccc; font-weight: bold; } .ui-datepicker-wrapper .ui-datepicker-btn{ font-family: serif; font-size: 20px; width: 20px; height: 50px; line-height: 50px; color: #1abc9c; text-align: center; cursor: pointer; text-decoration: none; } .ui-datepicker-wrapper .ui-datepicker-prev-btn{ float: left; } .ui-datepicker-wrapper .ui-datepicker-next-btn{ float: right; } .ui-datepicker-wrapper .ui-datepicker-body table{ width: 100%; border-collapse: collapse; } .ui-datepicker-wrapper .ui-datepicker-body th, .ui-datepicker-wrapper .ui-datepicker-body td{ text-align: center; height: 30px; } .ui-datepicker-wrapper .ui-datepicker-body th{ font-size: 12px; height: 40px; line-height: 40px; } .ui-datepicker-wrapper .ui-datepicker-body td{ font-size: 10px; border: 1px solid #f0f0f0; cursor: pointer; } .ui-datepicker-wrapper .ui-datepicker-body td.not{ color: #c0bbbb; font-weight: normal; } .ui-datepicker-wrapper .ui-datepicker-body td.active{ background-color: #1abc9c; font-weight: normal; color: #fff; }
3.js代码如下：
data.js如下：
(function(){ var datepicker = {}; datepicker.getMonthData = function(year, month){ var ret = []; // month 为真实的数据 if(!year || !month){ // 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; // if(month < 10){ // month = "0" + month; // } //上个月的最后一天 (当月的第0天) 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({ year: year, month: thisMonth, date: date, showDate: showDate }) } return { year: year, month: month, days: ret, lastDate: lastDate }; } window.datepicker = datepicker; })();
main.js如下:
(function(){ var datepicker = window.datepicker; var monthData; var $wrapper; //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 datepicker.buildUi = function(year, month){ 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+'-'+padding(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 data-date="'+date.date+'">'+date.showDate+'</td>'; if(date.date <= 0 || date.date > monthData.lastDate){ html +='<td class="not" data-date="'+ date.date +'">'+date.showDate+'</td>'; } else if(date.year === (new Date()).getFullYear() && date.month === ((new Date()).getMonth()+1) && date.date === (new Date()).getDate()){ html +='<td class="active" data-date="'+ date.date +'">'+date.showDate+'</td>'; } else{ html +='<td data-date="'+ date.date +'">'+date.showDate+'</td>'; } if(i%7 === 6){ html += "</tr>"; } }; html += '</tbody>'+ '</table>'+ '</div>'; return html; }; datepicker.render = function(direction){ var year,month; if(monthData){ year = monthData.year; month = monthData.month; } if(direction === 'prev'){ month--; if(month === 0){ month = 12; year--; } } if(direction === 'next'){ month++; } // var html = datepicker.buildUi(year, month); // $wrapper = document.createElement("div"); // $wrapper.className = 'ui-datepicker-wrapper'; // $wrapper.innerHTML = html; // document.body.appendChild($wrapper); var html = datepicker.buildUi(year, month); $wrapper = document.querySelector('.ui-datepicker-wrapper'); if(!$wrapper){ $wrapper = document.createElement("div"); document.body.appendChild($wrapper); $wrapper.className = 'ui-datepicker-wrapper'; } $wrapper.innerHTML = html; } datepicker.init = function(input){ datepicker.render(); var $input = document.querySelector(input); var isOpen = false; $input.value = format(new Date()); $input.addEventListener('click',function(){ if(isOpen){ $wrapper.classList.remove('ui-datepicker-wrapper-show') isOpen = false; }else{ $wrapper.classList.add('ui-datepicker-wrapper-show') var left = $input.offsetLeft; var top = $input.offsetTop; var height = $input.offsetHeight; $wrapper.style.top = top + height + 2 + "px"; $wrapper.style.left = left + "px"; isOpen = true; } },false); $wrapper.addEventListener('click',function(e){ var $target = e.target; if(!$target.classList.contains('ui-datepicker-btn')){ return; } // 上一月 if($target.classList.contains('ui-datepicker-prev-btn')){ datepicker.render('prev'); } // 下一月 else if($target.classList.contains('ui-datepicker-next-btn')){ datepicker.render('next'); } }, false); $wrapper.addEventListener('click',function(e){ var $target = e.target; if($target.tagName.toLowerCase() !== 'td'){ return; } var date = new Date(monthData.year, monthData.month - 1, $target.dataset.date); $input.value = format(date); $wrapper.classList.remove('ui-datepicker-wrapper-show') isOpen = false; }, false); } var padding = function(num){ if(num <= 9){ return "0"+num; } return num; } function format(date){ var ret = ''; ret += date.getFullYear() + "-"; ret += padding(date.getMonth() + 1) + "-"; ret += padding(date.getDate()); return ret; } })();
4.最终完成效果如下：
