编程 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 相关文章推荐

jquery $.ajax各个事件执行顺序

Oct 15 Javascript

jQuery仿Excel表格编辑功能的实现代码

May 01 Javascript

详解JavaScript语法对{}处理的坑爹之处

Jun 05 Javascript

jquery和js实现对div的隐藏和显示方法

Sep 26 Javascript

jQuery焦点图插件SaySlide

Dec 21 Javascript

Javascript基础_标记文字的实现方法

Jun 14 Javascript

微信小程序 location API实例详解

Oct 02 Javascript

微信小程序检查接口状态实例详解

Jun 23 Javascript

weebox弹出窗口不居中显示的解决方法

Nov 27 Javascript

浅谈React Native Flexbox布局(小结)

Jan 08 Javascript

基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍

Aug 24 Javascript

javascript/jquery实现点击触发事件的方法分析

Nov 11 jQuery

学习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