设计html日期控件(支持日期显示、时间显示、格式

当前位置 : 首页 > 网页制作 > CSS > 设计html日期控件(支持日期显示、时间显示、格式

设计html日期控件(支持日期显示、时间显示、格式

来源: 作者: 时间:2016-01-25 10:02
日期控件,可任意设置日期、时间 26684;式。如图所示(png图片有色差,实际效果更佳):-------------------------------------------------------------------------------------------------------------

日期控件,可任意设置日期、时间格式。如图所示(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 +="";

	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 += ""
	CalenderTitle += "";
	CalenderTitle += " "; 
	CalenderTitle += "";
	CalenderTitle += " "; 
	CalenderTitle += "";
	CalenderTitle += " "; 
	CalenderTitle += "";
	CalenderTitle += "
"; CalenderTitle += ""; CalenderTitle += " "; CalenderTitle += ""; CalenderTitle += ""; var lis = ""; for (i=0; i" + lis; lastMonthEndDate--; } for (i=1; i<=thisMonthEndDate; i++){ // Current Month's Date if(thisDateString == thisDate.getFullYear()+"-"+thisDate.getMonth()+"-"+i){ var momth_length=(parseInt(thisDate.getMonth())+1).toString(); if(momth_length.length=="1" && i<10){ lis += "
  • "; }else if(momth_length.length=="1" && i>9){ lis += "
  • "; }else if(momth_length.length=="2" && i<10){ lis += "
  • "; }else if(momth_length.length=="2" && i>9){ lis += "
  • "; } }else{ var momth_length=(parseInt(thisDate.getMonth())+1).toString(); if(momth_length.length=="1" && i<10){ lis += "
  • "; }else if(momth_length.length=="1" && i>9){ lis += "
  • "; }else if(momth_length.length=="2" && i<10){ lis += "
  • "; }else if(momth_length.length=="2" && i>9){ lis += "
  • "; } } } var j=1; for (i=thisMonthEndDay; i<6; i++){ // Next Month's Date lis += "
  • "+j+"
  • "; j++; } if (arguments.length>1){//arguments[0]-时间,arguments[1]-元素标签 arguments[1].parentNode.parentNode.getElementsByTagName("ul")[1].innerHTML = lis; arguments[1].parentNode.innerHTML = CalenderTitle; }else{ var CalenderBox = style+"" + //"
    " + "
    " + "
    "+CalenderTitle+"
    "+ "
    "+""+"
    "+ "
    " + "
      " + "
    • " + "
    • " + "
    • " + "
    • " + "
    • " + "
    • " + "
    • " + "
    " + "
      "+lis+"
    " + "
    " + "
    " + "" + "" + "" + "
    " + "
    "; return CalenderBox; } } function HS_DateAdd(interval,number,date){ number = parseInt(number); if (typeof(date)=="object"){var date = date} if (typeof(date)=="string"){var date = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2])} switch(interval){ case "y":return new Date(date.getFullYear()+number,date.getMonth(),date.getDate()); break; case "m":return new Date(date.getFullYear(),date.getMonth()+number,checkDate(date.getFullYear(),date.getMonth()+number,date.getDate())); break; case "d":return new Date(date.getFullYear(),date.getMonth(),date.getDate()+number); break; } } function checkDate(year,month,date){ var enddate = ["31","28","31","30","31","30","31","31","30","31","30","31"]; var returnDate = ""; if (year%4==0){enddate[1]="29"} if (date>enddate[month]){returnDate = enddate[month]}else{returnDate = date} return returnDate; } function WeekDay(date){ var theDate; if (typeof(date)=="object"){theDate = date} if (typeof(date)=="string"){theDate = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2]);} return theDate.getDay(); } function setDateFomat(dateFmt){ if(dateFmt==null) { isShowTime = "display:none"; } DateSplit = "-"; //日期的分隔符号 DateTimeSplit = " "; //日期与时间的分隔符 TimeSplit = ":"; //时间的分隔符号 if( dateFmt.toString().charAt(4)=='M' || dateFmt.toString().charAt(4)=='m' ) {DateSplit = "";} if( dateFmt.toString().charAt(4)!='M' && dateFmt.toString().charAt(4)!='m' ) {DateSplit = dateFmt.toString().charAt(4);} if( dateFmt.replace(DateSplit, "").replace(DateSplit, "").replace(DateSplit, "").substr(8).length < 3){ isShowTime = "display:none";//不显示时间 } if( dateFmt.replace(DateSplit, "").replace(DateSplit, "").replace(DateSplit, "").substr(8).length > 4){ var time = dateFmt.replace(DateSplit, "").replace(DateSplit, "").replace(DateSplit, "").substr(8); DateTimeSplit = time.charAt(time.toString().toLowerCase().indexOf('h')-1); TimeSplit = time.charAt(time.toString().toLowerCase().lastIndexOf('h')+1); isShowTime = ""; } } function setDate(Obj,dateFmt){ //*****!主调函数!******// if(dateFmt==null) { isShowTime = "display:none"; } if(dateFmt!=null) { setDateFomat(dateFmt); } inputObj = Obj; var DateValue = new Date(); var calenderObj = document.createElement("span"); if(inputObj.value.length>1){ calenderObj.innerHTML = HS_calender(inputObj.value);} else{ calenderObj.innerHTML = HS_calender(DateValue);} calenderObj.style.position = "absolute"; calenderObj.targetObj = inputObj; inputObj.parentNode.insertBefore(calenderObj,inputObj);//inputObj.nextSibling } function closeCalender(d){ var boxObj = d.parentNode.parentNode.parentNode; boxObj.parentNode.removeChild(boxObj); } function clearCalender(d){ inputObj.value=""; var boxObj = d.parentNode.parentNode.parentNode; boxObj.parentNode.removeChild(boxObj); } function getToday(){ //返回今天日期 var todayObj = new Date(); var todayString = ""+todayObj.getFullYear(); if((parseInt(todayObj.getMonth())+1).toString().length=="1"){ todayString += DateSplit+"0"+(parseInt(todayObj.getMonth())+1);} if((parseInt(todayObj.getMonth())+1).toString().length=="2"){ todayString += DateSplit+(parseInt(todayObj.getMonth())+1);} if( todayObj.getDate().toString().length=="1"){ todayString += DateSplit+"0"+todayObj.getDate();} if( todayObj.getDate().toString().length=="2"){ todayString += DateSplit+todayObj.getDate();} return todayString; } function selectThisDay(d){ var _h = d.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('div')[0].getElementsByTagName('span')[4].getElementsByTagName('a')[0].innerHTML; var _m = d.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('div')[0].getElementsByTagName('span')[6].getElementsByTagName('a')[0].innerHTML; var _time = ""; if(isShowTime != "display:none"){ if(_h.toString().length<2) { _h="0"+_h;} if(_m.toString().length<2) { _m="0"+_m;} _time += DateTimeSplit + _h + TimeSplit + _m; } var boxObj = d.parentNode.parentNode.parentNode.parentNode.parentNode; boxObj.targetObj.value = d.title+_time; boxObj.parentNode.removeChild(boxObj); } function showSelectYear(obj){ var spanDateTag = obj.parentNode.parentNode.parentNode.getElementsByTagName('span'); spanDateTag[0].style.display = "none"; spanDateTag[1].style.display = ""; spanDateTag[2].style.display = ""; spanDateTag[3].style.display = "none"; if(isShowTime == "display:none"){ spanDateTag[4].style.display = "none"; spanDateTag[5].style.display = "none"; spanDateTag[6].style.display = "none"; spanDateTag[7].style.display = "none"; }else{ spanDateTag[4].style.display = ""; spanDateTag[5].style.display = "none"; spanDateTag[6].style.display = ""; spanDateTag[7].style.display = "none"; } } function showSelectMonth(obj){ var spanDateTag = obj.parentNode.parentNode.parentNode.getElementsByTagName('span'); spanDateTag[0].style.display = ""; spanDateTag[1].style.display = "none"; spanDateTag[2].style.display = "none"; spanDateTag[3].style.display = "";; if(isShowTime == "display:none"){ spanDateTag[4].style.display = "none"; spanDateTag[5].style.display = "none"; spanDateTag[6].style.display = "none"; spanDateTag[7].style.display = "none"; }else{ spanDateTag[4].style.display = ""; spanDateTag[5].style.display = "none"; spanDateTag[6].style.display = ""; spanDateTag[7].style.display = "none"; } } function showSelectHour(obj){ var spanDateTag = obj.parentNode.parentNode.parentNode.getElementsByTagName('span'); spanDateTag[0].style.display = ""; spanDateTag[1].style.display = "none"; spanDateTag[2].style.display = ""; spanDateTag[3].style.display = "none";; if(isShowTime == "display:none"){ spanDateTag[4].style.display = "none"; spanDateTag[5].style.display = "none"; spanDateTag[6].style.display = "none"; spanDateTag[7].style.display = "none"; }else{ spanDateTag[4].style.display = "none"; spanDateTag[5].style.display = ""; spanDateTag[6].style.display = ""; spanDateTag[7].style.display = "none"; } } function showSelectMinute(obj){ var spanDateTag = obj.parentNode.parentNode.parentNode.getElementsByTagName('span'); spanDateTag[0].style.display = ""; spanDateTag[1].style.display = "none"; spanDateTag[2].style.display = ""; spanDateTag[3].style.display = "none";; if(isShowTime == "display:none"){ spanDateTag[4].style.display = "none"; spanDateTag[5].style.display = "none"; spanDateTag[6].style.display = "none"; spanDateTag[7].style.display = "none"; }else{ spanDateTag[4].style.display = ""; spanDateTag[5].style.display = "none"; spanDateTag[6].style.display = "none"; spanDateTag[7].style.display = ""; } } function selectHour(obj){ var spanDateTag = obj.parentNode.parentNode.parentNode.getElementsByTagName('span'); spanDateTag[4].getElementsByTagName("a")[0].innerHTML = obj.value; spanDateTag[4].style.display = ""; spanDateTag[5].style.display = "none"; } function selectMinute(obj){ var spanDateTag = obj.parentNode.parentNode.parentNode.getElementsByTagName('span'); spanDateTag[6].getElementsByTagName("a")[0].innerHTML = obj.value; spanDateTag[6].style.display = ""; spanDateTag[7].style.display = "none"; }

    设计心得:该控件的样式设计参考了另外的同款空间,采用不同的css调用方式,代码完全重写。经过一系列激战,过程有点点艰辛,而这样一来自己的前端设计水平也有所提高,收获还是挺大的!定义该空间版本为bata1.0,分享给大家。

    转载请说明出处:http://blog.csdn.net/seedingly/article/details/19031827

    有任何建议请回复留言!

    Tag:
    网友评论
    
    <