jquery练习02_手写日期插件(全网最强jquery练习)

本文链接：https://blog.csdn.net/mtb278750/article/details/129792286
1 日历

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery练习02日历插件</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<style type="text/css">
    #div_date{
        width:350px;
        border:1px solid blue;
        padding:2px;
        margin-top:10px;
        text-align: center;
        font-weight: bold;
    }
    #tab_date{
        border:1px solid blue;
        width:345px;
        border-collapse: collapse;
        margin:2px auto;
    }
    
   #tab_date th,#tab_date td{
      text-align: center;
      border:1px solid blue;
      padding:4px;
   }
   #tab_date th{
      background: #cccccc;
      color:blue;
   }
</style>
</head>
<body>
     <input type="date" name="birth"/><br/>
     <input type="text" name="birth" id="input_date"/>
     <script type="text/javascript">
        //定义一个全局变量记录时间
        var date=new Date();
        var year=date.getFullYear(),month=date.getMonth()+1;
        $(function(){
        	//文档加载时给input_date注册事件
        	$("#input_date").focus(function(){
        		//删除div
            	$("#div_date").remove();
        		$(this).after("<div id='div_date'></div>");
        		//创建一个表格：
        		createTable(date);
        	});
        	$("#input_date").blur(function(){
        		//删除table
        		//$("#tab_date").remove();
        	});
        });
        function createTable(date){
        	
        	//创建表格
        	var $tab=$("<table id='tab_date'></table>");
        	//创建第一行
        	var $tr1=$("<tr><th colspan='7'></th></tr>");
        	$tr1.children("th:first").append("<input type='button' value='<<' id='but_year_reduce'/>&nbsp;");
        	$tr1.children("th:first").append("<input type='button' value='<' id='but_month_reduce'/>&nbsp;");
        	$tr1.children("th:first").append("<input type='text'  id='text_date'/>&nbsp;");
        	$tr1.children("th:first").append("<input type='button' value='>' id='but_month_add'/>&nbsp;");
        	$tr1.children("th:first").append("<input type='button' value='>>' id='but_year_add'/>");
        	
        
        	
        	//创建第二行
        	var weekStr="日一二三四五六";
        	var $tr2=$("<tr></tr>");
        	for (var i = 0; i < weekStr.length; i++) {
        		$tr2.append("<th>"+(weekStr.charAt(i))+"</th>");
			}
        	$tab.append($tr1); $tab.append($tr2);
        	
        	//创建其他行
        	var daysTotal=getMyDays(year,month);
        	//alert(daysTotal);
        	//alert(date.getFullYear()+"::::"+date.getMonth()+1);
        	var n=0;
        	for(var i=1;true;i++){
        		//创建行
        		var $tr=$("<tr></tr>");
        		//tr中创建列
        		for(var j=0;j<=6;j++){
        			var $td=$("<td></td>");
        			if((n==0&&i==1&&j==getFirstDayWeek(year,month))||(n!=0)){
        				n++;
        			}
        			if(n!=0&&n<=daysTotal){
        				$td.text(n);
        			}
        			$tr.append($td);
        		}
        		$tab.append($tr);
        		if(n>=daysTotal){
        			break;
        		}
        	}
        	$("#div_date").append($tab);
        	
        	
        	//text_date不能输入
        	$("#text_date").attr("disabled","disabled");
        	//在text_date中显示年月
        	$("#text_date").css({"width":"100px","text-align":"center"});
        	$("#text_date").val(year+"年"+month+"月");
        	
        	//给所有有文本的td添加鼠标移入和移除事件
        	$("#tab_date tr:gt(1) td:parent").hover(function(){
        		  $(this).css("background-color","#cc6699");
        	},function(){
        		  $(this).removeAttr("style");
        	});
        	
        	//给所有有文本的td添加点击事件
        	$("#tab_date tr:gt(1) td:parent").bind("click",function(){
        		  $(this).css("background-color","#aaaaaa");
        		  //更改时间
        		  date.setDate($(this).text());
        		  //把年月日写入input_date中
        		  $("#input_date").val(year+"年"+month+"月"+date.getDate()+"日");
        	});
        	
        }
        // 根据年月 判断天数
        function getMyDays(year,month){
        	switch(month){
        	case 4:
        	case 6:
        	case 9:
        	case 11:
        		 return 30;
        	case 2:
        		 return ((year%400==0)||(year%4==0&&year%100!=0))?29:28;
            default:
            	 return 31;
        	}
        }
        
        //根据年月日 判断指定年月的1号是星期几
        function getFirstDayWeek(year,month){
        	var dateFirst=new Date(year,month-1,1);
        	return dateFirst.getDay();//0-6对应日-六
        }
     </script>
</body>
</html>