转一个日期输入控件,支持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脚本
Dec 12 Javascript
瀑布流布局代码一例
Apr 11 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
Jquery注册事件实现方法
May 18 Javascript
js中数组的常用方法小结
Dec 30 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
vue实现弹幕功能
Oct 25 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
学习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
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php抓取https的内容的代码
2010/04/06 PHP
php 缩略图实现函数代码
2011/06/23 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python使用turtule画五角星的方法
2015/07/09 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
入党积极分子评语
2014/05/04 职场文书
村级换届选举方案
2014/05/10 职场文书
物流专业求职信
2014/06/30 职场文书
库房管理员岗位职责
2015/02/12 职场文书
党纪处分决定书
2015/06/24 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
Django如何与Ajax交互
2021/04/29 Python