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

让焦点自动跳转

Jul 01 Javascript

浏览器图片选择预览、旋转、批量上传的JS代码实现

Dec 04 Javascript

手机端网页点击链接触发自动拨打或保存电话的示例代码

Aug 15 Javascript

在css加载完毕后自动判断页面是否加入css或js文件

Sep 10 Javascript

javascript实现汉字转拼音代码分享

Apr 20 Javascript

JQuery fileupload插件实现文件上传功能

Mar 18 Javascript

一个简单的JavaScript Map实例(分享)

Aug 03 Javascript

微信小程序教程系列之设置标题栏和导航栏（7）

Jun 29 Javascript

ligerUI---ListBox(列表框可移动的实例)

Nov 28 Javascript

js前端面试之同步与异步问题详解

Apr 03 Javascript

浅析vue中的provide / inject 有什么用处

Nov 10 Javascript

vue实现学生信息管理系统

May 30 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