<HTML>
<HEAD>
<TITLE>日期选择器</TITLE>
<SCRIPTtype="text/javascript">
/**
*返回日期
*@paramdthedelimiter
*@parampthepatternofyourdate
*@authorXinge(修改)
*/
String.prototype.toDate=function(x,p){
if(x==null)x="-";
if(p==null)p="ymd";
vara=this.split(x);
vary=parseInt(a[p.indexOf("y")]);
//remembertochangethisnextcentury;)
if(y.toString().length<=2)y+=2000;
if(isNaN(y))y=newDate().getFullYear();
varm=parseInt(a[p.indexOf("m")])-1;
vard=parseInt(a[p.indexOf("d")]);
if(isNaN(d))d=1;
returnnewDate(y,m,d);
}
/**
*格式化日期
*@paramdthedelimiter
*@parampthepatternofyourdate
*@authorXinge(修改)
*/
Date.prototype.format=function(style){
varo={
"M+":this.getMonth()+1,//month
"d+":this.getDate(),//day
"h+":this.getHours(),//hour
"m+":this.getMinutes(),//minute
"s+":this.getSeconds(),//second
"w+":"天一二三四五六".charAt(this.getDay()),//week
"q+":Math.floor((this.getMonth()+3)/3),//quarter
"S":this.getMilliseconds()//millisecond
}
if(/(y+)/.test(style)){
style=style.replace(RegExp.$1,
(this.getFullYear()+"").substr(4-RegExp.$1.length));
}
for(varkino){
if(newRegExp("("+k+")").test(style)){
style=style.replace(RegExp.$1,
RegExp.$1.length==1?o[k]:
("00"+o[k]).substr((""+o[k]).length));
}
}
returnstyle;
};
/**
*日历类
*@parambeginYear1990
*@paramendYear
*@paramlangŀ(中文)|1(英语)可自由扩充
*@paramdateFormatStyle"yyyy-MM-dd";
*@version2007-03-16
*@authorXinge(修改)
*@update
*/
functionCalendar(lang,beginYear,endYear,dateFormatStyle){
this.beginYear=1990;
this.endYear=2010;
this.lang=0;//0(中文)|1(英文)
this.dateFormatStyle="yyyy-MM-dd";
if(beginYear!=null&&endYear!=null){
this.beginYear=beginYear;
this.endYear=endYear;
}
if(lang!=null){
this.lang=lang
}
if(dateFormatStyle!=null){
this.dateFormatStyle=dateFormatStyle
}
this.dateControl=null;
this.panel=this.getElementById("calendarPanel");
this.form=null;
this.date=newDate();
this.year=this.date.getFullYear();
this.month=this.date.getMonth();
this.colors={
"cur_word":"#FFFFFF",//当日日期文字颜色
"cur_bg":"#00FF00",//当日日期单元格背影色
"sun_word":"#FF0000",//星期天文字颜色
"sat_word":"#0000FF",//星期六文字颜色
"td_word_light":"#000000",//单元格文字颜色
"td_word_dark":"#CCCCCC",//单元格文字暗色
"td_bg_out":"#FFFFFF",//单元格背影色
"td_bg_over":"#FFCC00",//单元格背影色
"tr_word":"#FFFFFF",//日历头文字颜色
"tr_bg":"#FF6600",//日历头背影色
"input_border":"#CCCCCC",//input控件的边框颜色
"input_bg":"#EFEFEF"//input控件的背影色
}
this.draw();
this.bindYear();
this.bindMonth();
this.changeSelect();
this.bindData();
}
/**
*日历类属性（语言包，可自由扩展）
*/
Calendar.language={
"year":[[""],[""]],
"months":[["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"]
],
"weeks":[["日","一","二","三","四","五","六"],
["SUN","MON","TUR","WED","THU","FRI","SAT"]
],
"clear":[["清空"],["CLS"]],
"today":[["今天"],["TODAY"]],
"close":[["关闭"],["CLOSE"]]
}
Calendar.prototype.draw=function(){
calendar=this;
varmvAry=[];
mvAry[mvAry.length]='<formname="calendarForm"style="margin:0px;">';
mvAry[mvAry.length]='<tablewidth="100%"border="0"cellpadding="0"cellspacing="0">';
mvAry[mvAry.length]='<tr>';
mvAry[mvAry.length]='<thalign="left"width="1%"><inputstyle="border:1pxsolid'+calendar.colors["input_border"]+';background-color:'+calendar.colors["input_bg"]+';width:16px;height:20px;"name="prevMonth"type="button"id="prevMonth"value="<"/></th>';
mvAry[mvAry.length]='<thalign="center"width="98%"nowrap="nowrap"><selectname="calendarYear"id="calendarYear"style="font-size:12px;width:50%;"></select><selectname="calendarMonth"id="calendarMonth"style="font-size:12px;width:50%;"></select></th>';
mvAry[mvAry.length]='<thalign="right"width="1%"><inputstyle="border:1pxsolid'+calendar.colors["input_border"]+';background-color:'+calendar.colors["input_bg"]+';width:16px;height:20px;"name="nextMonth"type="button"id="nextMonth"value=">"/></th>';
mvAry[mvAry.length]='</tr>';
mvAry[mvAry.length]='</table>';
mvAry[mvAry.length]='<tableid="calendarTable"width="100%"style="border:0pxsolid#CCCCCC;background-color:#DDD"border="0"cellpadding="3"cellspacing="1">';
mvAry[mvAry.length]='<tr>';
for(vari=0;i<7;i++){
mvAry[mvAry.length]='<thstyle="font-weight:normal;background-color:'+calendar.colors["tr_bg"]+';color:'+calendar.colors["tr_word"]+';">'+Calendar.language["weeks"][this.lang][i]+'</th>';
}
mvAry[mvAry.length]='</tr>';
for(vari=0;i<6;i++){
mvAry[mvAry.length]='<tralign="center">';
for(varj=0;j<7;j++){
if(j==0){
mvAry[mvAry.length]='<tdstyle="cursor:default;color:'+calendar.colors["sun_word"]+';"></td>';
}elseif(j==6){
mvAry[mvAry.length]='<tdstyle="cursor:default;color:'+calendar.colors["sat_word"]+';"></td>';
}else{
mvAry[mvAry.length]='<tdstyle="cursor:default;"></td>';
}
}
mvAry[mvAry.length]='</tr>';
}
mvAry[mvAry.length]='<trstyle="background-color:'+calendar.colors["input_bg"]+';">';
mvAry[mvAry.length]='<thcolspan="2"><inputname="calendarClear"type="button"id="calendarClear"value="'+Calendar.language["clear"][this.lang]+'"style="border:1pxsolid'+calendar.colors["input_border"]+';background-color:'+calendar.colors["input_bg"]+';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[mvAry.length]='<thcolspan="3"><inputname="calendarToday"type="button"id="calendarToday"value="'+Calendar.language["today"][this.lang]+'"style="border:1pxsolid'+calendar.colors["input_border"]+';background-color:'+calendar.colors["input_bg"]+';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[mvAry.length]='<thcolspan="2"><inputname="calendarClose"type="button"id="calendarClose"value="'+Calendar.language["close"][this.lang]+'"style="border:1pxsolid'+calendar.colors["input_border"]+';background-color:'+calendar.colors["input_bg"]+';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[mvAry.length]='</tr>';
mvAry[mvAry.length]='</table>';
mvAry[mvAry.length]='</form>';
this.panel.innerHTML=mvAry.join("");
this.form=document.forms["calendarForm"];
this.form.prevMonth.onclick=function(){calendar.goPrevMonth(this);}
this.form.nextMonth.onclick=function(){calendar.goNextMonth(this);}
this.form.calendarClear.onclick=function(){calendar.dateControl.value="";calendar.hide();}
this.form.calendarClose.onclick=function(){calendar.hide();}
this.form.calendarYear.onchange=function(){calendar.update(this);}
this.form.calendarMonth.onchange=function(){calendar.update(this);}
this.form.calendarToday.onclick=function(){
vartoday=newDate();
calendar.date=today;
calendar.year=today.getFullYear();
calendar.month=today.getMonth();
calendar.changeSelect();
calendar.bindData();
calendar.dateControl.value=today.format(calendar.dateFormatStyle);
calendar.hide();
}
}
//年份下拉框绑定数据
Calendar.prototype.bindYear=function(){
varcy=this.form.calendarYear;
cy.length=0;
for(vari=this.beginYear;i<=this.endYear;i++){
cy.options[cy.length]=newOption(i+Calendar.language["year"][this.lang],i);
}
}
//月份下拉框绑定数据
Calendar.prototype.bindMonth=function(){
varcm=this.form.calendarMonth;
cm.length=0;
for(vari=0;i<12;i++){
cm.options[cm.length]=newOption(Calendar.language["months"][this.lang][i],i);
}
}
//向前一月
Calendar.prototype.goPrevMonth=function(e){
if(this.year==this.beginYear&&this.month==0){return;}
this.month--;
if(this.month==-1){
this.year--;
this.month=11;
}
this.date=newDate(this.year,this.month,1);
this.changeSelect();
this.bindData();
}
//向后一月
Calendar.prototype.goNextMonth=function(e){
if(this.year==this.endYear&&this.month==11){return;}
this.month++;
if(this.month==12){
this.year++;
this.month=0;
}
this.date=newDate(this.year,this.month,1);
this.changeSelect();
this.bindData();
}
//改变SELECT选中状态
Calendar.prototype.changeSelect=function(){
varcy=this.form.calendarYear;
varcm=this.form.calendarMonth;
for(vari=0;i<cy.length;i++){
if(cy.options[i].value==this.date.getFullYear()){
cy[i].selected=true;
break;
}
}
for(vari=0;i<cm.length;i++){
if(cm.options[i].value==this.date.getMonth()){
cm[i].selected=true;
break;
}
}
}
//更新年、月
Calendar.prototype.update=function(e){
this.year=e.form.calendarYear.options[e.form.calendarYear.selectedIndex].value;
this.month=e.form.calendarMonth.options[e.form.calendarMonth.selectedIndex].value;
this.date=newDate(this.year,this.month,1);
this.changeSelect();
this.bindData();
}
//绑定数据到月视图
Calendar.prototype.bindData=function(){
varcalendar=this;
vardateArray=this.getMonthViewArray(this.date.getYear(),this.date.getMonth());
vartds=this.getElementById("calendarTable").getElementsByTagName("td");
for(vari=0;i<tds.length;i++){
//tds[i].style.color=calendar.colors["td_word_light"];
tds[i].style.backgroundColor=calendar.colors["td_bg_out"];
tds[i].onclick=function(){return;}
tds[i].onmouseover=function(){return;}
tds[i].onmouseout=function(){return;}
if(i>dateArray.length-1)break;
tds[i].innerHTML=dateArray[i];
if(dateArray[i]!=""){
tds[i].onclick=function(){
if(calendar.dateControl!=null){
calendar.dateControl.value=newDate(calendar.date.getFullYear(),
calendar.date.getMonth(),
this.innerHTML).format(calendar.dateFormatStyle);
}
calendar.hide();
}
tds[i].onmouseover=function(){
this.style.backgroundColor=calendar.colors["td_bg_over"];
}
tds[i].onmouseout=function(){
this.style.backgroundColor=calendar.colors["td_bg_out"];
}
if(newDate().format(calendar.dateFormatStyle)==
newDate(calendar.date.getFullYear(),
calendar.date.getMonth(),
dateArray[i]).format(calendar.dateFormatStyle)){
//tds[i].style.color=calendar.colors["cur_word"];
tds[i].style.backgroundColor=calendar.colors["cur_bg"];
tds[i].onmouseover=function(){
this.style.backgroundColor=calendar.colors["td_bg_over"];
}
tds[i].onmouseout=function(){
this.style.backgroundColor=calendar.colors["cur_bg"];
}
}//endif
}
}
}
//根据年、月得到月视图数据(数组形式)
Calendar.prototype.getMonthViewArray=function(y,m){
varmvArray=[];
vardayOfFirstDay=newDate(y,m,1).getDay();
vardaysOfMonth=newDate(y,m+1,0).getDate();
for(vari=0;i<42;i++){
mvArray[i]="";
}
for(vari=0;i<daysOfMonth;i++){
mvArray[i+dayOfFirstDay]=i+1;
}
returnmvArray;
}
//扩展document.getElementById(id)多浏览器兼容性
Calendar.prototype.getElementById=function(id){
if(typeof(id)!="string"||id=="")returnnull;
if(document.getElementById)returndocument.getElementById(id);
if(document.all)returndocument.all(id);
try{returneval(id);}catch(e){returnnull;}
}
//扩展object.getElementsByTagName(tagName)
Calendar.prototype.getElementsByTagName=function(object,tagName){
if(document.getElementsByTagName)returndocument.getElementsByTagName(tagName);
if(document.all)returndocument.all.tags(tagName);
}
//取得HTML控件绝对位置
Calendar.prototype.getAbsPoint=function(e){
varx=e.offsetLeft;
vary=e.offsetTop;
while(e=e.offsetParent){
x+=e.offsetLeft;
y+=e.offsetTop;
}
return{"x":x,"y":y};
}
//显示日历
Calendar.prototype.show=function(dateControl,popControl){
if(dateControl==null){
thrownewError("arguments[0]isnecessary")
}
this.dateControl=dateControl;
if(dateControl.value.length>0){
this.date=newDate(dateControl.value.toDate());
this.year=this.date.getFullYear();
this.month=this.date.getMonth();
this.changeSelect();
this.bindData();
}
if(popControl==null){
popControl=dateControl;
}
varxy=this.getAbsPoint(popControl);
this.panel.parentNode.style.left=xy.x+"px";
this.panel.parentNode.style.top=(xy.y+dateControl.offsetHeight)+"px";
this.panel.parentNode.style.visibility="visible";
}
//隐藏日历
Calendar.prototype.hide=function(){
this.panel.parentNode.style.visibility="hidden";
}
varhtml='<divstyle="
position:absolute;visibility:hidden;z-index:9999;background-color:#fff;border:2pxsolid#ccc;width:225px;font-size:12px;
"><iframestyle="position:absolute;width:100%;height:199px;z-index:-1;border:none"></iframe>
<divid="calendarPanel"></div>
</div>';
document.write(html);
</SCRIPT>
</HEAD>
<BODY>
<>
<INPUTclass=textboxonclick="newCalendar(0).show(this)"
readOnlysize="23"value="2007-03-16"name=postTime>
</BODY>
</HTML>
【转一个日期输入控件，支持FF】相关文章：
★ js输入中文效果