设计html日期控件(支持日期显示、时间显示、格式定制) |
您所在的位置：网站首页 › html5时间显示 › 设计html日期控件(支持日期显示、时间显示、格式定制) |
设计html日期控件(支持日期显示、时间显示、格式定制)
|
日期控件，可任意设置日期、时间格式。如图所示（png图片有色差，实际效果更佳）： ----------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- html代码如下(支持时间到时分，不支持时间到秒，使用前务必导入js文件)： javascript如下(建议另外新建js文件)： // ***** 变量定义 ****** // var YearSt = 1950; //可选择的开始年份 var YearEnd = 2050; //可选择的结束年份 var dateFomat; var inputObj; var DateSplit = "-"; //日期的分隔符号 var DateTimeSplit = " "; //日期与时间的分隔符 var TimeSplit = ":"; //时间的分隔符号 var isShowTime = "display:none";//是否显示时间 // ***** 控件界面 ****** // function HS_calender(){ var style = ""; style +=""; style +=".calender { width:170px; height:auto; font-size:11px; margin-right:14px; background-color:#F9F9F9;; border:1px solid #397EAE; padding:1px}"; style +=".calender .calenderTitle {color:#FFCC00; background-color:#2650A6; text-align:center;height:20px; line-height:20px; clear:both}"; style +=".calender .calenderTitle a {margin:0 1px;color:#FFCC00;text-decoration:none;}"; style +=".calender .calenderTitle span a {margin:0 1px;color:#FFCC00;font-weight:bold;text-decoration:none;}"; style +=".calender .calenderTitleEnter {background-color:#2650A6; text-align:center;height:20px; line-height:20px;}"; style +=".calender ul {list-style-type:none; margin:-1; padding:0;}"; style +=".calender .day {color:#FFF; background-color:#2650A6; height:20px;}";//日一二三四五六 style +=".calender .day li{ float:left; width:14%; height:20px; line-height:20px; text-align:center}"; style +=".calender .date li{ float:left; width:14%; height:20px; line-height:20px; text-align:center}"; style +=".calender li a { color:#5daac0;text-decoration:none; font-family:Tahoma; font-size:11px; }"; style +=".calender li a:hover { background-color:#EEE;padding:3px;}"; style +=".selected { background-color:#DBDBDB; padding:2px}"; style +=".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}"; style +=".calender .LastMonth, .calender .NextMonth{ text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}"; style +=".calender .LastMonth { float:left;}"; style +=".calender .NextMonth { float:right;}"; style +=".calenderBottom {clear:both; border-top:1px solid #ddd; padding: 3px 0; text-align:right}"; style +=".calenderBottom a {text-decoration:none; margin:3px; font-size:11px; color:#2650A6}"; style +=""; var h="0",m="0";//时间 var thisDate; if (typeof(arguments[0])=="string"){ var DateValueTemp = inputObj.value.replace(DateSplit, "").replace(DateSplit, "").replace(DateSplit, "").replace(DateTimeSplit, "").replace(TimeSplit, ""); var year = DateValueTemp.substr(0,4); var month = parseInt(DateValueTemp.substr(4,2))-1+""; var date = DateValueTemp.substr(6,2); //alert(year+" "+month+" "+date); if(DateValueTemp.substr(8,2).toString().length>0) {h=DateValueTemp.substr(8,2);} if(DateValueTemp.substr(10,2).toString().length>0){m=DateValueTemp.substr(10,2);} thisDate = new Date(year,month,date); thisDate.setHours(parseInt(h), parseInt(m)); }else if (typeof(arguments[0])=="object"){ thisDate = arguments[0]; } var lastMonthEndDate = HS_DateAdd("d","-1",thisDate.getFullYear()+"-"+thisDate.getMonth()+"-01").getDate(); var lastMonthDate = WeekDay(thisDate.getFullYear()+"-"+thisDate.getMonth()+"-01"); var thisMonthLastDate = HS_DateAdd("d","-1",thisDate.getFullYear()+"-"+(parseInt(thisDate.getMonth())+1).toString()+"-01"); var thisMonthEndDate = thisMonthLastDate.getDate(); var thisMonthEndDay = thisMonthLastDate.getDay(); var thisDateString = thisDate.getFullYear()+"-"+thisDate.getMonth()+"-"+thisDate.getDate(); var CalenderTitle = ""; CalenderTitle += ""+thisDate.getFullYear()+"年" CalenderTitle += ""; for(var i=YearSt;i 9){ lis += ""+i+""; }else if(momth_length.length=="2" && i9){ lis += ""+i+""; } }else{ var momth_length=(parseInt(thisDate.getMonth())+1).toString(); if(momth_length.length=="1" && i9){ lis += ""+i+""; }else if(momth_length.length=="2" && i9){ lis += ""+i+""; } } } var j=1; for (i=thisMonthEndDay; i |
【本文地址】