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

最新推荐文章于 2024-06-04 10:03:34 发布
最新推荐文章于 2024-06-04 10:03:34 发布
阅读量1w 收藏 5
点赞数 3
分类专栏： Html_CSS 文章标签： html 日期控件 日期 时间
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seedingly/article/details/19031827
版权

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

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


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

html代码如下(支持时间到时分，不支持时间到秒，使用前务必导入js文件)：

<input type="text" name="creattime" id="creattimeid" size="13" value=''  οnclick="setDate(this,'yyyy-MM-dd HH:mm')"> 
<input type="text" name="creattime" id="creattimeid" size="13" value=''  οnfοcus="setDate(this,'yyyy/MM/dd ')"> 
<input type="text" name="creattime" id="creattimeid" size="13" value=''  οnfοcus="setDate(this,'yyyyMMdd')"> 
<input type="text" name="creattime" id="creattimeid" size="13" value=''  οnfοcus="setDate(this,'yyyy-MM-ddHH&mm')"> 
<input type="text" name="creattime" id="creattimeid" size="13" value=''  οnfοcus="setDate(this)"> 

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 type='text/css'>";
	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 +="</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 += "<span style='color:#FFCC00;'><a href='#' οnclick='showSelectYear(this)' title='双击选择年份' >"+thisDate.getFullYear()+"</a>年</span>"
	CalenderTitle += "<span style='display:none;'><select style='width:54px;' onChange='HS_calender(new Date(parseInt(this.value),parseInt("+thisDate.getMonth()+"),1),this.parentNode);'>";
				for(var i=YearSt;i <= YearEnd;i ++){
					if (i==thisDate.getFullYear()){
						CalenderTitle += "<option value="+i+" selected>"+i+"</option>";
					}else{
						CalenderTitle += "<option value="+i+">"+i+"</option>";
					}
				}CalenderTitle += "</select></span>";
	CalenderTitle += "<span style='color:#FFCC00;'><a href='#' οnclick='showSelectMonth(this)' title='双击选择月份'>"+(parseInt(thisDate.getMonth())+1)+"</a>月</span> "; 
	CalenderTitle += "<span style='display:none;'><select style='width:40px;' onChange='HS_calender(new Date(parseInt("+thisDate.getFullYear()+"),parseInt(this.value)-1,1),this.parentNode);'>";
				for(var i=1;i <= 12;i ++){
					if (i==(thisDate.getMonth()+1)){
						CalenderTitle += "<option value="+i+" selected>"+i+"</option>";
					}else{
						CalenderTitle += "<option value="+i+">"+i+"</option>";
					}
				}CalenderTitle += "</select></span>";
	CalenderTitle += "<span style='color:#FFCC00;"+isShowTime+"'><a href='#' οnclick='showSelectHour(this)' title='双击选择时间'>"+(parseInt(thisDate.getHours()))+"</a>时</span> "; 
	CalenderTitle += "<span style='display:none;'><select style='width:40px;' onChange='selectHour(this);'>";
				for(var i=0;i <=12;i ++){
					if (i==(thisDate.getHours())){
						if(i<10) {CalenderTitle += "<option value="+i+" selected>0"+i+"时</option>";}
						else {CalenderTitle += "<option value="+i+" selected>"+i+"时</option>";}
					}else{
						if(i<10) {CalenderTitle += "<option value="+i+" >0"+i+"时</option>";}
						else {CalenderTitle += "<option value="+i+" >"+i+"时</option>";}
					}
				}CalenderTitle += "</select></span>";
	CalenderTitle += "<span style='color:#FFCC00;margin:0 -2px;"+isShowTime+"'><a href='#' οnclick='showSelectMinute(this)' title='双击选择时间'>"+0+"</a>分</span> "; 
	CalenderTitle += "<span style='display:none;'><select style='width:40px;' onChange='selectMinute(this);'>";
				for(var i=0;i <=59;i ++){
						if(i<10) {CalenderTitle += "<option value="+i+">0"+i+"分</option>";}
						else {CalenderTitle += "<option value="+i+">"+i+"分</option>";}
				}CalenderTitle += "</select></span>";
	CalenderTitle += "<br>";
	CalenderTitle += "<a href='#' id='turnDate' οnclick=HS_calender(HS_DateAdd('y',-1,'"+thisDate.getFullYear()+"-"+thisDate.getMonth()+"-"+thisDate.getDate()+"'),this) title='上一年'>年↑ </a>";
	CalenderTitle += "<a href='#' οnclick=HS_calender(HS_DateAdd('y',1,'"+thisDate.getFullYear()+"-"+thisDate.getMonth()+"-"+thisDate.getDate()+"'),this) title='下一年'>年↓ </a> ";
	CalenderTitle += "<a href='#' οnclick=HS_calender(HS_DateAdd('m',-1,'"+thisDate.getFullYear()+"-"+thisDate.getMonth()+"-"+thisDate.getDate()+"'),this) title='上一月'>月↑ </a>";
	CalenderTitle += "<a href='#' οnclick=HS_calender(HS_DateAdd('m',1,'"+thisDate.getFullYear()+"-"+thisDate.getMonth()+"-"+thisDate.getDate()+"'),this) title='下一月'>月↓</a>";
	
	var lis = "";
	for (i=0; i<lastMonthDate; i++){  // Last Month's Date
		lis = "<li class='lastMonthDate'>"+lastMonthEndDate+"</li>" + 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 += "<li><a href=javascript:void(0) class='selected' οnclick='selectThisDay(this)' title='"+thisDate.getFullYear()+DateSplit+"0"+(parseInt(thisDate.getMonth())+1)+DateSplit+"0"+i+"'>"+i+"</a></li>";
			}else if(momth_length.length=="1" && i>9){
				lis += "<li><a href=javascript:void(0) class='selected' οnclick='selectThisDay(this)' title='"+thisDate.getFullYear()+DateSplit+"0"+(parseInt(thisDate.getMonth())+1)+DateSplit+i+"'>"+i+"</a></li>";
			}else if(momth_length.length=="2" && i<10){
				lis += "<li><a href=javascript:void(0) class='selected' οnclick='selectThisDay(this)' title='"+thisDate.getFullYear()+DateSplit+(parseInt(thisDate.getMonth())+1)+DateSplit+"0"+i+"'>"+i+"</a></li>";
			}else if(momth_length.length=="2" && i>9){
				lis += "<li><a href=javascript:void(0) class='selected' οnclick='selectThisDay(this)' title='"+thisDate.getFullYear()+DateSplit+(parseInt(thisDate.getMonth())+1)+DateSplit+i+"'>"+i+"</a></li>";
			}
		}else{
			var momth_length=(parseInt(thisDate.getMonth())+1).toString();
			if(momth_length.length=="1" && i<10){
				lis += "<li><a href=javascript:void(0) οnclick='selectThisDay(this)' title='"+thisDate.getFullYear()+DateSplit+"0"+(parseInt(thisDate.getMonth())+1)+DateSplit+"0"+i+"'>"+i+"</a></li>";
			}else if(momth_length.length=="1" && i>9){
				lis += "<li><a href=javascript:void(0) οnclick='selectThisDay(this)' title='"+thisDate.getFullYear()+DateSplit+"0"+(parseInt(thisDate.getMonth())+1)+DateSplit+i+"'>"+i+"</a></li>";
			}else if(momth_length.length=="2" && i<10){
				lis += "<li><a href=javascript:void(0) οnclick='selectThisDay(this)' title='"+thisDate.getFullYear()+DateSplit+(parseInt(thisDate.getMonth())+1)+DateSplit+"0"+i+"'>"+i+"</a></li>";
			}else if(momth_length.length=="2" && i>9){
				lis += "<li><a href=javascript:void(0) οnclick='selectThisDay(this)' title='"+thisDate.getFullYear()+DateSplit+(parseInt(thisDate.getMonth())+1)+DateSplit+i+"'>"+i+"</a></li>";
			}
		}
	}
	var j=1;
	for (i=thisMonthEndDay; i<6; i++){  // Next Month's Date
		lis += "<li class='nextMonthDate'>"+j+"</li>";
		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+"" + //"<br>" +
			"<div class='calender'>" +
				"<div class='calenderTitle'>"+CalenderTitle+"</div>"+
				"<div class='calenderTitleEnter'>"+""+"</div>"+
				"<div class='calenderBody'>" +
					"<ul class='day'>" +
						"<li>日</li>" +
						"<li>一</li>" +
						"<li>二</li>" +
						"<li>三</li>" +
						"<li>四</li>" +
						"<li>五</li>" +
						"<li>六</li>" +
					"</ul>" +
					"<ul class='date' id='thisMonthDate'>"+lis+"</ul>" +
				"</div>" +
				"<div class='calenderBottom'>" +
					"<a href='#' οnclick='closeCalender(this)'>关闭 </a>" +
					"<a href='#' οnclick='clearCalender(this)'>清空 </a>" +
					"<span><span><a href='#' οnclick='selectThisDay(this)' title='"+getToday()+"'>今天 </a></span></span>" +
				"</div>" +
			"</div>";
		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

有任何建议请回复留言！

seedingly
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML日期选择器：简化日期输入与交互
a451319296的博客
06-17 8376
HTML日期选择器（Date Picker）是一种方便的用户界面元素，用于简化日期输入和交互。通过使用元素的type="date"属性，可以轻松创建日期选择器。用户可以从交互式日历中选择日期值，并且日期格式通常遵循ISO 8601标准。日期选择器还支持设置最小值和最大值以限制日期范围。通过JavaScript，可以获取用户选择的日期值，进而进行后续处理。HTML日期选择器在现代浏览器中得到广泛支持，尽管在旧版本浏览器上可能有不同的呈现方式或不支持。了解和应用HTML日期选择器可以提高表单交互性
html日期控件
03-19
HTML日期控件是网页开发中常见的一种交互元素，它允许用户在网页上选择或输入日期。在HTML5标准中，引入了`<input type="date">`标签来创建内置的日期选择器，但这个原生控件在不同浏览器中的表现并不一致，尤其是在...
简单的html日期控件
10-02
超好用简单的html日期控件。将整个文件夹拷贝到你的工程下，在html页面直接引用WdatePicker.js即可
elementUI自定义时间控件样式--拿走！
最新发布
2302_78387246的博客
06-04 108
【代码】elementUI自定义时间控件样式--拿走！
HTML5超简单的日期时间控件
weixin_45015094的博客
05-06 1533
HTML日期控件和时间控件 时间都是宝贵的，尤其是开发人员，所以为了节省时间，我直接展示下效果，符合您的要求就采纳，不符合，就不用继续看了！ 日期控件效果： 时间控件展示： 日期控件 <div class="col-md-6"> <label for="">填报日期: </label> <input class="" id="" type="...
html 日期 年月 年月日 及默认样式
小米粒的博客
10-26 1万+
html 日期 年月 年月日 及默认样式 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&amp
从0开始，手写一个日历控件
xiong305的博客
01-19 674
从0搭建日历组件
日期时间控件_日期时间控件_
10-04
开发者可以定制DataWindow的列类型，将某一列设为日期时间类型，PowerBuilder会自动呈现一个日期时间控件。当用户在控件中选择新的日期和时间后，相应的数据库字段会被更新。 5. 示例代码和运行： 在提供的压缩包...
基于html5 canvas的一个日期时间控件、日期选择器
03-29
总的来说，这个项目结合了HTML5 Canvas的强大图形能力、JavaScript的事件处理和DOM操作，以及日期和时间的处理，创建了一个高度定制化的日期时间选择控件。通过学习这个项目，开发者可以深入理解如何利用...
jq 日期控件 可选择时间，日期，星期等等
11-03
"jq 日期控件 可选择时间，日期，星期等等" 是一个专为JavaScript（js）环境设计的日期选择插件，它提供丰富的功能，让用户能够方便地选择日期、时间甚至是星期。下面我们将深入探讨这个主题。 首先，`jq`通常指的...
移动端日期和时间选择控件lCalendar-master.zip
05-05
- **日期选择**：`lCalendar`提供了直观的日期选择界面，用户可以通过滑动月份来选择所需日期，支持多种格式的日期显示。 - **时间选择**：除了日期，控件还提供了小时和分钟的选择，可以配置24小时制或12小时制，...
hml js 2010年日历表，含农历、节日（hta封装版） 源码
02-11
hml js 2010年日历表，含农历、节日（hta封装版） 源码 2010年日历表，含农历、节日，星期等，基于JavaScript+Html技术，已封装成hta文件，下载后直接双击即可运行，如果想要查看源代码的话，直接用记事本打开，或右键选择其它文本编辑程序。把本日历全部打印放在办公桌上，它就是一份2010年的日历啦~
HTML中带时间的日期控件
11-19
HTML中带时间的日期控件 HTML中带时间的日期控件
自定义html5中日期选取器的样式
@素素~的博客
12-28 2857
自定义html5中日期选取器的样式
修改html date样式,html5中如何去掉input type date默认样式
weixin_30781059的博客
06-03 60
html5中如何去掉input type date默认样式HTML代码：选择日期：选择时间：选择星期：选择月份：目前WebKit下有如下9个伪元素可以改变日期控件的UI：::-webkit-datetime-edit– 控制编辑区域的::-webkit-datetime-edit-fields-wrapper– 控制年月日这个区域的::-webkit-datetime-edit-text– ...
JAVA 海啸_JAVA日历
weixin_35466750的博客
03-05 168
var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);var days = new Array("日","一", "二", "三","四"...
HTML5新控件 - 日期和时间选择输入
热门推荐
lianzhang861的博客
05-23 4万+
转载自：https://blog.csdn.net/u014063717/article/details/50914466HTML5定义了几个与日期有关的新控件。支持日期控件的浏览器会提供一个方便的下拉式日历，供用户选择。注意：我测试了Chrome和Opera，火狐提供下拉式日历支持，其它浏览器可能仍是一个普通文本框。1，日期控件 - date&lt;input type="date" valu...
html时间控件修改默认格式,纯js日期控件-可以自定义样式.html
weixin_33242795的博客
06-03 486
calender selectbody {font-family: "Lucida sans unicode", sans-serif;font-size: 12px;margin: 0;padding: 0;height: 100%;}#basis {display: inline;position: relative;}#calender {position: absolute;top: 30...
用纯html元素实现日期选择控件
WinstonLau的博客
03-13 5212
&amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;
带时间的日期选择web控件.pdf
02-20
综上所述，"带时间的日期选择web控件.pdf"是一个功能强大且灵活的日期和时间选择控件，具有简洁的界面和多种显示格式，使得用户能够轻松地在网页中进行日期和时间的选择，并且易于进行定制和整合，是一个理想的日期...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值