设计html日期控件(支持日期显示、时间显示、格式定制)-前端--易笔记-weiyer.com

　　核心提示：日期控件，可任意设置日期、时间式。如图所示（png图片有色差，实际效果更佳）：-------------------------------------------------------------...

日期控件，可任意设置日期、时间格式。如图所示（png图片有色差，实际效果更佳）：

----------------------------------------------------------------------------------------------------------

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

----------------------------------------------------------------------------------------------------------

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 += ""+thisDate.getFullYear()+"年"
	CalenderTitle += "";
	CalenderTitle += ""+(parseInt(thisDate.getMonth())+1)+"月 "; 
	CalenderTitle += "";
	CalenderTitle += ""+(parseInt(thisDate.getHours()))+"时 "; 
	CalenderTitle += "";
	CalenderTitle += ""+0+"分 "; 
	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 += ""+i+"";
			}else if(momth_length.length=="1" && i>9){
				lis += ""+i+"";
			}else if(momth_length.length=="2" && i<10){
				lis += ""+i+"";
			}else if(momth_length.length=="2" && i>9){
				lis += ""+i+"";
			}
		}else{
			var momth_length=(parseInt(thisDate.getMonth())+1).toString();
			if(momth_length.length=="1" && i<10){
				lis += ""+i+"";
			}else if(momth_length.length=="1" && i>9){
				lis += ""+i+"";
			}else if(momth_length.length=="2" && i<10){
				lis += ""+i+"";
			}else if(momth_length.length=="2" && i>9){
				lis += ""+i+"";
			}
		}
	}
	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('p')[0].getElementsByTagName('span')[4].getElementsByTagName('a')[0].innerHTML;
	var _m = d.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('p')[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，分享给大家。

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

有任何建议请回复留言！

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

时间：2014/2/10 15:29:50 点击：

本类热门

本类推荐

本类固顶

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

时间：2014/2/10 15:29:50 点击：

您可能感兴趣的文章

相关评论

发表我的评论

本类热门

本类推荐

本类固顶