<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <mce:script type="text/javascript"><!-- var month_array=["1","2","3","4","5","6","7","8","9","10","11","12"]; var Sum_date =["31","28","31","30","31","30","31","31","30","31","30","31"]; // 初始化 _initdate = function() { var ds = new Date(); var ms =ds.getMonth(); var md =ds.getDate(); document.getElementById("dateCt2").innerHTML=ms+1; var dk=""; var mt=_getDay(ds.getYear(),ms+1,1); for (var ki=0;ki<mt;ki++) { dk=dk+"<span></span>" } for (var k=1;k<=Sum_date[ms];k=k+1) { dk=dk+"<span>"+k+"</span>"; } document.getElementById("date_dow").innerHTML=dk; var dc=document.getElementById("date_dow"); dc.getElementsByTagName("span")[md-1+mt].style.background="red"; _span_click(); } // 点击左右 _click_month = function(fak) { var s = document.getElementById("dateCt2").innerText; var flags=0; for (var i=0; i<month_array.length;i++ ) { if ( s== month_array[i]) { flags = i; break; } } // 控制月份 if (fak == "L") { if (flags>0) { flags=flags-1; } }else if (fak == "R") { if (flags<(month_array.length-1)) { flags=flags+1; } } document.getElementById("dateCt2").innerHTML=month_array[flags]; // 控制日期 var ds=""; // 求每月第一天星期几 var ys=_getDay(2011,month_array[flags],1); for (var kk=0;kk<ys;kk++ ) { ds=ds+"<span></span>"; } for (var k=1;k<=Sum_date[flags]; k=k+1) { ds=ds+"<span>"+k+"</span>"; } document.getElementById("date_dow").innerHTML=ds; _span_click(); } // 根据日期求星期 _getDay=function(y,ms,d) { var w; var m = parseInt(ms); c=Math.floor(y/100); if(m==1) { y=y-1; m=13; }else if (m==2) { y=y-1; m=14; } y=y-Math.floor(y/100)*100; w=y+Math.floor(y/4)+Math.floor(c/4)-2*c+Math.floor(26*(m+1)/10)+d-1; return w%7>=0?w%7:w%7+7; } _span_click= function(){ var dcc=document.getElementById("date_dow"); var dccArea=dcc.getElementsByTagName("span"); for (var ks=0;ks<dccArea.length;ks++ ) { dccArea[ks].onclick=function(){ //this.innerHTML; document.getElementById("testDate").value=document.getElementById("dateCt2").innerText+"-"+this.innerHTML; } } } // --></mce:script> <mce:style type="text/css"><!-- .dateContain { width:200px;height:150px;border:1px solid #ccc;} .dateCt1{float:left;width:10%;height:20px;border-bottom:1px solid #ccc;text-align:center;cursor:pointer;} .dateCt2{float:left;width:80%;height:20px;border-bottom:1px solid #ccc;text-align:center;} .date_cen{float:left;width:100%;height:29px;} .date_dow{float:left;width:100%;height:100px;} .date_dow span,.date_cen span{float:left;width:14%;display:inline;cursor:pointer;} --></mce:style><style type="text/css" mce_bogus="1"> .dateContain { width:200px;height:150px;border:1px solid #ccc;} .dateCt1{float:left;width:10%;height:20px;border-bottom:1px solid #ccc;text-align:center;cursor:pointer;} .dateCt2{float:left;width:80%;height:20px;border-bottom:1px solid #ccc;text-align:center;} .date_cen{float:left;width:100%;height:29px;} .date_dow{float:left;width:100%;height:100px;} .date_dow span,.date_cen span{float:left;width:14%;display:inline;cursor:pointer;} </style> </HEAD> <BODY> <input type="text" id="testDate" onclick="_initdate()"/> <div class="dateContain"> <div class="dateCt1" id="dateCtL" onclick="_click_month('L')"><</div> <div class="dateCt2" id="dateCt2"></div> <div class="dateCt1" id="dateCtR" onclick="_click_month('R')">></div> <div class="date_cen"> <span>sun</span><span>mon</span><span>tus</span><span>wen</span><span>tur</span><span>fri</span><span>sat</span> </div> <div class="date_dow" id="date_dow"></div> </div> <input type="text" id="testDate2" /> </BODY> </HTML>
本文介绍了一个基于HTML、CSS和JavaScript实现的简单日期选择器组件。该组件通过自定义脚本动态生成并显示指定月份的日历，并允许用户通过点击来选择日期。此外，还包含了前后翻页的功能。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
