效果如图：
Html代码:
Code<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript">
var date_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(); // 初始化
}
date_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:300px; 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 date_help('birthday', '-');
new date_help('birthday2', '/');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
日期1:<input type="text" id="birthday" maxlength="10" /><br /><br /><br />
日期2:<input type="text" id="birthday2" maxlength="10" /><br /><br /><br />
</div>
</form>
</body>
</html>