编程 Javascript

转一个日期输入控件，支持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;

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>

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JAVASCRIPT IE 与 FF中兼容问题小结

Feb 18 Javascript

三级下拉菜单的js实现代码

May 23 Javascript

快速学习JavaScript的6个思维技巧

Oct 13 Javascript

JavaScript实现标题栏文字轮播效果代码

Oct 24 Javascript

JavaScript入门教程之引用类型

May 04 Javascript

JS中this上下文对象使用方式

Oct 09 Javascript

Node.js使用NodeMailer发送邮件实例代码

Mar 06 Javascript

微信小程序实现皮肤功能（夜间模式）

Jun 18 Javascript

JavaScript 中Date对象的格式化代码方法汇总

Sep 06 Javascript

vue axios 给生产环境和发布环境配置不同的接口地址(推荐)

May 08 Javascript

JS实现音量控制拖动

Jan 15 Javascript

Nuxt pages下不同的页面对应layout下的页面布局操作

Nov 05 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