简易日历插件

效果图：

 

html：

<li class="nav-item">日历</li>

 

css:

.Dat{width: 200px;position: fixed;z-index: 99;font-size: 12px;color: #000;background-color: #fff;}
.Dat .Dat-title{height: 20px;line-height: 20px;text-align: center;position: relative;border: 1px solid #6593CF;}
.Dat .Dat-title .Dat-btn{position: absolute;width: 0;height: 0;font-size: 0;top: 4px;overflow:hidden;border-width: 6px;border-style: dashed;border-color: transparent;}
.Dat .Dat-title .Dat-btn.prive{border-right: 6px solid #6593CF;left: 0;}
.Dat .Dat-title .Dat-btn.next{border-left: 6px solid #6593CF;right: 0;}
.Dat table th{text-align: center;width: 20px;height: 20px;}
.Dat table td{text-align: right;padding: 0 8px 0 0;width: 20px;height: 20px;cursor: pointer;}
.Dat table td+td{border-left: 1px solid #6593CF;}
.Dat table td:hover{color: #6593CF;}
.Dat table tr{border: 1px solid #6593CF;border-top: none;}

 

javascript: 

依赖JQ

$('.nav-item').click(function(){
　　var that = this;
　　MyDat({
　　dom:that,
　　callback:function(e){
　　　　console.log(e)
　　}
　　})
})

function MyDat(obj){
　　$('.Dat').remove();
　　var dt = new Date(),
　　y = dt.getFullYear(),
　　m = dt.getMonth(),
　　d = dt.getDay();
　　var div = document.createElement('div');
　　div.className = 'Dat';
　　var str = '<div class="Dat-title"><span class="Dat-btn prive"></span> <span class="date"></span><span class="Dat-btn next"></span></div>'
　　　　　　+'<table><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>'
　　　　　　+'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'
　　　　　　+'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'
　　　　　　+'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'
　　　　　　+'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'
　　　　　　+'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'
　　　　　　+'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table>'
　　$(div).append(str);
　　$('body').append(div);

　　var w,h;
　　if( ( $(div).width() + $(obj.dom)[0].offsetLeft ) > $(window).width() ){
　　　　w = $(obj.dom)[0].offsetLeft-($(div).width()-$(obj.dom)[0].offsetWidth);
　　}else{
　　　　w = $(obj.dom)[0].offsetLeft;
　　};

　　if( ( $(div).height() + $(obj.dom)[0].offsetTop+$(obj.dom)[0].offsetHeight ) > $(window).height() ){
　　　　h = $(obj.dom)[0].offsetTop-($(div).height());
　　}else{
　　　　h = $(obj.dom)[0].offsetTop+$(obj.dom)[0].offsetHeight;
　　}

　　$(div).css({'left': w, 'top': h})
　　setDay(y, m, d);
　　function setDay(y, m, d){
　　　　var dt_arr = getD(y,m+1)
　　　　var index = 0;
　　　　var first_day = new Date(y,m,1).getDay();
　　　　$('.date').text(y+'年'+(m+1)+'月 ')
　　　　$('.Dat td').attr({ 'data-year': '', 'data-month': '', 'data-day': '' }).text('');
　　　　$('.Dat td').each(function(k,v){
　　　　　　if( k >= first_day ){
　　　　　　　　$(v).attr({ 'data-year': y, 'data-month': m, 'data-day': dt_arr[index] }).text(dt_arr[index]);
　　　　　　　　index++
　　　　　　}
　　　　})

　　};　　
　　$(div).click(function(e){

　　　　if(e.target == $('.Dat-btn.prive')[0]){
　　　　　　--m;
　　　　　　dt = new Date(y, m, d);
　　　　}else if(e.target == $('.Dat-btn.next')[0]){
　　　　　　++m;
　　　　　　dt = new Date(y, m, d);
　　　　}else if(e.target.nodeName == 'TD'){
　　　　　　obj.callback(e.target.dataset)
　　　　}
　　　　y = dt.getFullYear();
　　　　m = dt.getMonth();
　　　　d = dt.getDay();
　　　　setDay(y, m, d);
　　})
　　$(document).on('click',function(e){
　　　　if(
　　　　　　e.target == obj.dom ||e.target == $('.Dat-title')[0] ||e.target == $('.Dat-title .prive')[0] ||
　　　　　　e.target == $('.Dat-title .next')[0] ||e.target == $('.Dat-title .next')[0] ||e.target == $('.Dat-title .date')[0] ||
　　　　　　e.target == $('.Dat table')[0] ||e.target == $('.Dat table th')[0] ||e.target == $('.Dat table th')[1] ||
　　　　　　e.target == $('.Dat table th')[2] ||e.target == $('.Dat table th')[3] ||e.target == $('.Dat table th')[4] ||
　　　　　　e.target == $('.Dat table th')[5] ||e.target == $('.Dat table th')[6]
　　　　){
　　　　　　return;
　　　　}else{
　　　　　　$(div).remove();
　　　　}
　　})　　
};
/*判断闰年*/
function isLeapYear(year){
　　var cond1 = year % 4 == 0; //条件1：年份必须要能被4整除
　　var cond2 = year % 100 != 0; //条件2：年份不能是整百数
　　var cond3 = year % 400 == 0; //条件3：年份是400的倍数
　　var cond = cond1 && cond2 || cond3;
　　if (cond) {
　　　　return true;
　　} else {
　　　　return false;
　　}
};

/*获取月份中的日期*/
function getD(y,m){
　　var a = [];
　　var n = 1;
　　if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
　　　　n = 32;
　　} else if (m == 2) {
　　　　if (isLeapYear(y)) {
　　　　　　n = 30;
　　　　} else {
　　　　　　n = 29;
　　　　};
　　} else {
　　　　n = 31;
　　};
　　for (var i = 1; i < n; i++) {
　　　　a.push(i);
　　};
　　return a
};