转一个日期输入控件,支持FF


Posted in Javascript onApril 27, 2007

<HTML>
<HEAD>
<TITLE>日期选择器</TITLE>
<SCRIPT type="text/javascript">
/**
* 返回日期
* @param d the delimiter
* @param p the pattern of your date
* @author  Xinge(修改)
*/
String.prototype.toDate = function(x, p) {
 if(x == null) x = "-";
 if(p == null) p = "ymd";
 var a = this.split(x);
 var y = parseInt(a[p.indexOf("y")]);
 //remember to change this next century ;)
 if(y.toString().length <= 2) y += 2000;
 if(isNaN(y)) y = new Date().getFullYear();
 var m = parseInt(a[p.indexOf("m")]) - 1;
 var d = parseInt(a[p.indexOf("d")]);
 if(isNaN(d)) d = 1;
 return new Date(y, m, d);
}

/**
* 格式化日期
* @param   d the delimiter
* @param   p the pattern of your date
* @author  Xinge(修改)
*/
Date.prototype.format = function(style) {
 var o = {
   "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(var k in o){
   if(new RegExp("("+ k +")").test(style)){
     style = style.replace(RegExp.$1,
       RegExp.$1.length == 1 ? o[k] :
       ("00" + o[k]).substr(("" + o[k]).length));
   }
 }
 return style;
};

/**
* 日历类
* @param   beginYear 1990
* @param   endYear  ?
* @param   lang     ŀ(中文)|1(英语) 可自由扩充
* @param   dateFormatStyle  "yyyy-MM-dd";
* @version 2007-03-16
* @author  Xinge(修改)
* @update
*/
function Calendar(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 = new Date();
 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;

 var mvAry = [];
 mvAry[mvAry.length]  = '  <form name="calendarForm" style="margin: 0px;">';
 mvAry[mvAry.length]  = '    <table width="100%" border="0" cellpadding="0" cellspacing="0">';
 mvAry[mvAry.length]  = '      <tr>';
 mvAry[mvAry.length]  = '        <th align="left" width="1%"><input style="border: 1px solid ' + 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]  = '        <th align="center" width="98%" nowrap="nowrap"><select name="calendarYear" id="calendarYear" style="font-size:12px;width:50%;"></select><select name="calendarMonth" id="calendarMonth" style="font-size:12px;width:50%;"></select></th>';
 mvAry[mvAry.length]  = '        <th align="right" width="1%"><input style="border: 1px solid ' + 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]  = '    <table id="calendarTable" width="100%" style="border:0px solid #CCCCCC;background-color:#DDD" border="0" cellpadding="3" cellspacing="1">';
 mvAry[mvAry.length]  = '      <tr>';
 for(var i = 0; i < 7; i++) {
   mvAry[mvAry.length]  = '      <th style="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(var i = 0; i < 6;i++){
   mvAry[mvAry.length]  = '    <tr align="center">';
   for(var j = 0; j < 7; j++) {
     if (j == 0){
       mvAry[mvAry.length]  = '  <td style="cursor:default;color:' + calendar.colors["sun_word"] + ';"></td>';
     } else if(j == 6) {
       mvAry[mvAry.length]  = '  <td style="cursor:default;color:' + calendar.colors["sat_word"] + ';"></td>';
     } else {
       mvAry[mvAry.length]  = '  <td style="cursor:default;"></td>';
     }
   }
   mvAry[mvAry.length]  = '    </tr>';
 }
 mvAry[mvAry.length]  = '      <tr style="background-color:' + calendar.colors["input_bg"] + ';">';
 mvAry[mvAry.length]  = '        <th colspan="2"><input name="calendarClear" type="button" id="calendarClear" value="' + Calendar.language["clear"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
 mvAry[mvAry.length]  = '        <th colspan="3"><input name="calendarToday" type="button" id="calendarToday" value="' + Calendar.language["today"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
 mvAry[mvAry.length]  = '        <th colspan="2"><input name="calendarClose" type="button" id="calendarClose" value="' + Calendar.language["close"][this.lang] + '" style="border: 1px solid ' + 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 () {
   var today = new Date();
   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() {
 var cy = this.form.calendarYear;
 cy.length = 0;
 for (var i = this.beginYear; i <= this.endYear; i++){
   cy.options[cy.length] = new Option(i + Calendar.language["year"][this.lang], i);
 }
}

//月份下拉框绑定数据
Calendar.prototype.bindMonth = function() {
 var cm = this.form.calendarMonth;
 cm.length = 0;
 for (var i = 0; i < 12; i++){
   cm.options[cm.length] = new Option(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 = new Date(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 = new Date(this.year, this.month, 1);
 this.changeSelect();
 this.bindData();
}

//改变SELECT选中状态
Calendar.prototype.changeSelect = function() {
 var cy = this.form.calendarYear;
 var cm = this.form.calendarMonth;
 for (var i= 0; i < cy.length; i++){
   if (cy.options[i].value == this.date.getFullYear()){
     cy[i].selected = true;
     break;
   }
 }
 for (var i= 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 = new Date(this.year, this.month, 1);
 this.changeSelect();
 this.bindData();
}

//绑定数据到月视图
Calendar.prototype.bindData = function () {
 var calendar = this;
 var dateArray = this.getMonthViewArray(this.date.getYear(), this.date.getMonth());
 var tds = this.getElementById("calendarTable").getElementsByTagName("td");
 for(var i = 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 = new Date(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 (new Date().format(calendar.dateFormatStyle) ==
         new Date(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"];
       }
     }//end if
   }
 }
}

//根据年、月得到月视图数据(数组形式)
Calendar.prototype.getMonthViewArray = function (y, m) {
 var mvArray = [];
 var dayOfFirstDay = new Date(y, m, 1).getDay();
 var daysOfMonth = new Date(y, m + 1, 0).getDate();
 for (var i = 0; i < 42; i++) {
   mvArray[i] = " ";
 }
 for (var i = 0; i < daysOfMonth; i++){
   mvArray[i + dayOfFirstDay] = i + 1;
 }
 return mvArray;
}

//扩展 document.getElementById(id) 多浏览器兼容性
Calendar.prototype.getElementById = function(id){
 if (typeof(id) != "string" || id == "") return null;
 if (document.getElementById) return document.getElementById(id);
 if (document.all) return document.all(id);
 try {return eval(id);} catch(e){ return null;}
}

//扩展 object.getElementsByTagName(tagName)
Calendar.prototype.getElementsByTagName = function(object, tagName){
 if (document.getElementsByTagName) return document.getElementsByTagName(tagName);
 if (document.all) return document.all.tags(tagName);
}

//取得HTML控件绝对位置
Calendar.prototype.getAbsPoint = function (e){
 var x = e.offsetLeft;
 var y = 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){
   throw new Error("arguments[0] is necessary")
 }
 this.dateControl = dateControl;
 if (dateControl.value.length > 0){
 this.date = new Date(dateControl.value.toDate());
 this.year = this.date.getFullYear();
 this.month = this.date.getMonth();
   this.changeSelect();
   this.bindData();
 }
 if (popControl == null){
   popControl = dateControl;
 }
 var xy = 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";
}

var html = '<div style="\
  position:absolute;visibility:hidden;z-index:9999;background-color:#fff;border:2px solid #ccc;width:225px;font-size:12px;\
  "><iframe style="position:absolute;width:100%;height:199px;z-index:-1;border:none"></iframe>\
  <div id="calendarPanel"></div>\
  </div>';
document.write(html);

</SCRIPT>
</HEAD>
<BODY>
<!--
//英文:
new Calendar(1).show(this)
-->
<INPUT class=textbox onclick="new Calendar(0).show(this)" 
readOnly size="23" value="2007-03-16" name=postTime>
</BODY>
</HTML>

Javascript 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
JavaScript 继承详解(四)
Jul 13 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
canvas时钟效果
Feb 16 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
学习jquery之一
Apr 27 #Javascript
JavaScript与函数式编程解释
Apr 27 #Javascript
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 #Javascript
从sohu弄下来的flash中展示图片的代码
Apr 27 #Javascript
pjblog中的UBBCode.js
Apr 25 #Javascript
用javascript实现的仿Flash广告图片轮换效果
Apr 24 #Javascript
疯掉了,尽然有js写的操作系统
Apr 23 #Javascript
You might like
留言板翻页的实现详解
2006/10/09 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
定义select的边框颜色
2008/04/28 Javascript
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
浅析js封装和作用域
2013/07/09 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
python基础教程之对象和类的实际运用
2014/08/29 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
Python3中列表list合并的四种方法
2019/04/19 Python
python搜索包的路径的实现方法
2019/07/19 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
品管员岗位职责
2013/11/10 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
幸福来敲门观后感
2015/06/04 职场文书
小学主题班会教案
2015/08/17 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python