用户输入框日期(年月日)提醒-WEB开发人员网络-XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <TITLE> New Document </TITLE>
<style>
	fieldset{ width:300px; padding:20px;}
</style>
<script type="text/javascript">
/*
	*** http://www.hansir.cn ***
*/
var data_help = function(inp, divide){
		this.inp = document.getElementById(inp);
		this.divide = divide;
		this.format = 'yyyy'+divide+'mm'+divide+'dd';
		//显示字符样式
		this.styleH='<span style="font-weight:bold; color:green">';
		this.styleB='</span>'; 
		this.load(); // 初始化
}
data_help.prototype={ 
	load: function(){
		// 创建一个用于显示提示的DIV并设置样式
		var div = document.createElement('div');
		div.setAttribute('style', 'height:21px; line-height:21px;  background:#fffff6; color:#f33; border:1px solid #ccc; border-top:0; text-indent:3px; position:absolute; visibility:hidden');
		div.style.cssText = 'height:21px; line-height:21px;  background:#fffff6; color:#f33; border:1px solid #ccc; border-top:0; text-indent:3px; position:absolute; visibility:hidden';
		div.innerHTML = this.format;
		this.div = div;
		document.body.appendChild(div);
		
		// 设置DIV的位置
		var inp = this.inp;
		var inpW = inp.offsetWidth, inpH = inp.offsetHeight;
		var left = 0, top = 0;
		while(inp != null){ // 计算输入框在页面里的坐标给提示框使用
			left += inp.offsetLeft;
			top += inp.offsetTop;
			inp = inp.offsetParent;
		}
		this.div.style.height = '21px';
		this.div.style.width = inpW-2 + 'px';
		this.div.style.left = left + 'px';
		this.div.style.top = inpH+top + 'px';
		
		// 加载输入框事件
		var oThis = this;
		this.inp.onfocus = function(){
			oThis.inp_v.call(oThis);
		}
		this.inp.onblur = function(){
			oThis.inp_h.call(oThis);
		}
		this.inp.onkeyup = function(e){
			e?intKey=e.which:intKey=event.keyCode; 
			oThis.inp_chk.call(oThis,intKey);
		}
	},
	inp_v: function(){ // 显示
		this.div.style.visibility = 'visible';
	},
	inp_h: function(){ // 隐藏
		this.div.style.visibility = 'hidden';
	},
	inp_chk: function(intkey){ // 格式化日期及提示信息样式 2008-03-20
		if(intKey==37||intKey==39)return; // 左右键不检测
		var date = this.parseDate(intKey); // // 用户输入的日期
		if(!date)return;
		var format = this.format; // 提示字符
		var divide = this.divide;
		var uarr = date.split(divide), farr = format.split(divide) // 字符分组
		var darr = date.split(/\d/); //分隔符组
		var styleH = this.styleH, styleB = this.styleB;
		var y=farr[0], m=farr[1], d=farr[2]; //年月日
		if(uarr[0])y=styleH+y.slice(0,uarr[0].length)+styleB+y.slice(uarr[0].length,y.length);
		if(uarr[1]){
			m=styleH+divide+m.slice(0,uarr[1].length)+styleB+m.slice(uarr[1].length,m.length);
		}else{
			darr.length>0?m=styleH+divide+styleB+m:m=divide+m;
		}
		if(uarr[2]){
			d=styleH+divide+d.slice(0,uarr[2].length)+styleB+d.slice(uarr[2].length,d.length);
		}else{
			darr.length>1?d=styleH+divide+styleB+d:d=divide+d;
		}
		this.div.innerHTML= y+m+d;
	},
	parseDate: function(intKey){ // 格式化日期格式，从别人写的方法里扣来的
		/*
			日期只接受数字字符，并且符合正常日期，比如4月只到30号，错误的部分比如“200A“里的“A”系统将把错误字符删除，如果朋友有好的建议欢迎分享。
		*/
		var date = this.inp.value.replace(/\s/g,'');
		if(intKey==8) return date; // 退格键直接返回
		var divide=this.divide;
		var strDateArray = date.split(divide);
		strDateArray[0]?intYear = strDateArray[0].replace(/^(\d*)/,'$1'):intYear='';
		strDateArray[1]?intMonth = strDateArray[1].replace(/^(\d*)/,'$1'):intMonth='';
		strDateArray[2]?intDay = strDateArray[2].replace(/^(\d*)/,'$1'):intDay='';
		isNaN(intYear)?intYear='':intYear=intYear.slice(0,4);
		isNaN(intMonth)?intMonth='':intMonth=intMonth.slice(0,2);
		isNaN(intDay)?intDay='':intDay=intDay.slice(0,2);
		intMonth>12?intMonth=intMonth.slice(0,1):'';
		if(intMonth == 1 || intMonth == 3 || intMonth == 5 || intMonth == 7 || intMonth == 8 || intMonth == 10 || intMonth == 12){
			intDay>31?intDay=intDay.slice(0,1):'';
		}
		if(intMonth == 4 || intMonth == 6 || intMonth == 9 || intMonth == 11){
			intDay.slice>30?intDay=intDay.slice(0,1):'';
		}
		if(intMonth == 2){
			boolLeapYear = false;
			if ((intYear % 100) === 0) {
				if ((intYear % 400) === 0) {
					boolLeapYear = true;
				}
			} else {
				if ((intYear % 4) === 0) {
					boolLeapYear = true;
				}
			}
			if (boolLeapYear) {
				intDay.slice(0,1)>2?intDay='':'';
			} else {
				if (intDay > 28) {
					intDay.slice(0,1)>2?intDay='':intDay>28?intDay='2':'';
				}
			}
		}
		switch(strDateArray.length){
			case 1:
				intYear.length==4?date=date+divide:date=intYear;
				break;
			case 2:
				intMonth.length==2?date=intYear+divide+intMonth+divide:date=intYear+divide+intMonth;
				break;
			default:
				date=intYear+divide+intMonth+divide+intDay;
		}
		this.inp.value=date;
		return date;
	}
		
}
window.onload = function(){
	new data_help('birthday', '-');
	new data_help('birthday2', '/');
}
</script>
 </HEAD>
<body>
<div>
日期1：<input type="text" id="birthday" /><br/><br /><br />
日期2：<input type="text" id="birthday2" /><br/><br /><br />
</div>
</body>
</html>

提示：您可以先修改部分代码再运行