日历

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>日历控件</title>
<script src=”js/new_file.js” defer></script>
</head>
 
<body>
<input id=”calendar” type=”text” />
</body>

这个时间组件以前发过一次,上次那个很烂,这次有时间了,把这个升级了,性能更好,完美兼容所有浏览器,ie6下拉select档不住的问题
也解决了.总之,差不多也算一个完美的时间组件,
在线demo nothingDemo
突然发现下面的代码里面有个运行代码可以看在线demo,就再最下面
然后贴出源码,只有一点简单的说明

</html>

复制代码 代码如下:

var days = new Array(“日”,”一”,”二”,”三”,”四”,”五”,”六”);//星期
var today = new Date();//当天日期,备用
var month_big = new Array(“1″,”3″,”5″,”7″,”8″,”10″,”12”);
//包含所有大月的数组
var month_small = new Array(“4″,”6″,”9″,”11”); //包含所有小月的数组
var separator = “-“;//间隔符 
 
var calendar = document.getElementById(“calendar”);
var cal_parent = calendar.parentNode;//获取父元素
var cal_width = ((calendar.clientWidth<150) ? 150 :
calendar.clientWidth);//获取input的宽度,如果input宽度小于150,调整为150,150为日历块最小宽度
var cal_height = calendar.clientHeight;//获取input的高度,整数
var cal_X = calendar.offsetLeft;//获取input左边 距父元素的距离,整数
var cal_Y = calendar.offsetTop;//获取input顶部 距父元素的距离,整数
 
calendar.style.cursor = “pointer”;//将input的鼠标设置成小手
calendar.readOnly = “readOnly”;//设置input为只读
calendar.onblur = hideCalendar; //当input失去焦点时,隐藏cal_body
calendar.onclick = showCalendar;//点击input时调用showCalendar函数
 
//取input宽度的七分之一再减一作为方格的边长
var pane_height = cal_width/7 – 1; 
 
function hideCalendar(){
    var cal_body = document.getElementById(“cal_body”);
    if(cal_body != undefined){
        cal_body.parentNode.removeChild(cal_body);
    }
}
 
//显示日历主体
function showCalendar(){
    var cal_body = document.getElementById(“cal_body”);
    if(cal_body != undefined){
        cal_body.parentNode.removeChild(cal_body);
    }
    else{
        var cal_body = document.createElement(“DIV”);
        cal_body.id = “cal_body”;
        cal_body.style.width = cal_width + “px”;
        cal_body.style.height = “auto”;
        cal_body.style.overflow = “hidden”;
        cal_body.style.position = “absolute”;
        cal_body.style.zIndex = “9”;
        cal_body.style.left = cal_X + “px”;
        cal_body.style.top = (cal_Y + cal_height + 5) + “px”;
        cal_body.style.border = “solid 1px #CCCCCC”;
       
//鼠标移动到cal_body上时,禁用input的onblur事件,防止cal_body因input失去焦点而被隐藏
        cal_body.onmouseover = function(){
            calendar.onblur = undefined;
        }
       
//鼠标从cal_body移除时,启用input的onblur事件,并且先让input获得焦点,否则当在cal_body上空白处点击后再移出在其他地方点击时,input因没有焦点而无法触发onblur事件
        cal_body.onmouseout = function(){
            calendar.focus();
            calendar.onblur = hideCalendar;
        }
        cal_parent.appendChild(cal_body);
 
        var line1 = document.createElement(“DIV”);
        line1.style.width = cal_width + “px”;
        line1.style.height =  pane_height + “px”;
        line1.style.backgroundColor = “#0FF”;
 
        var btn1 = document.createElement(“DIV”);
        btn1.style.width = (cal_width/3 – 3) + “px”;
        btn1.style.height = pane_height + “px”;
        btn1.style.lineHeight = pane_height + “px”;
        btn1.style.textAlign = “center”;
        btn1.innerHTML = “<“;
        btn1.style.cursor = “pointer”;
        btn1.style.cssFloat = “left”;
        btn1.onclick = function(){
            if(isValidated()){
                var old_year =
parseInt(document.getElementById(“input_year”).value);
                if(old_year > 1960){
                    var year = old_year – 1;
                    var month =
parseInt(document.getElementById(“input_month”).value);
                    var val = year + separator + month + separator +
1;
                    init(val);
                }
            }
        };
        line1.appendChild(btn1);
 
        var input_year = document.createElement(“INPUT”);
        input_year.id = “input_year”;
        input_year.style.width = (cal_width/3) + “px”;
        input_year.style.height = “70%”;
        input_year.style.cssFloat = “left”;
        input_year.style.textAlign = “center”;
        input_year.onchange = function(){
            changed();
        };
        line1.appendChild(input_year);
 
        var btn2 = document.createElement(“DIV”);
        btn2.style.width = (cal_width/3 – 3) + “px”;
        btn2.style.height = pane_height + “px”;
        btn2.style.lineHeight = pane_height + “px”;
        btn2.style.textAlign = “center”;
        btn2.innerHTML = “>”;
        btn2.style.cursor = “pointer”;
        btn2.style.cssFloat = “left”;
        btn2.onclick = function(){
            if(isValidated()){
                var old_year =
parseInt(document.getElementById(“input_year”).value);
                if(old_year < 2050){
                    var year = old_year + 1;
                    var month =
parseInt(document.getElementById(“input_month”).value);
                    var val = year + separator + month + separator +
1;
                    init(val);
                }
            }
        };
        line1.appendChild(btn2);
 
        var line2 = document.createElement(“DIV”);
        line2.style.width = cal_width + “px”;
        line2.style.height =  pane_height + “px”;
        line2.style.backgroundColor = “#0FF”;
 
        var btn3 = document.createElement(“DIV”);
        btn3.style.width = (cal_width/3 – 3) + “px”;
        btn3.style.height = pane_height + “px”;
        btn3.style.lineHeight = pane_height + “px”;
        btn3.style.textAlign = “center”;
        btn3.innerHTML = “<“;
        btn3.style.cursor = “pointer”;
        btn3.style.cssFloat = “left”;
        btn3.onclick = function(){
            if(isValidated()){
                var old_month =
parseInt(document.getElementById(“input_month”).value)
                if(old_month > 1){
                    var year =
parseInt(document.getElementById(“input_year”).value);
                    var month = old_month – 1;
                    var val = year + separator + month + separator +
1;
                    init(val);
                }
                else {
                    var year =
parseInt(document.getElementById(“input_year”).value) – 1;
                    var month = 12;
                    var val = year + separator + month + separator +
1;
                    init(val);
                }
            }
        };
        line2.appendChild(btn3);
 
        var input_month = document.createElement(“INPUT”);
        input_month.id = “input_month”;
        input_month.style.width = (cal_width/3) + “px”;
        input_month.style.height = “70%”;
        input_month.style.cssFloat = “left”;
        input_month.style.textAlign = “center”;
        input_month.onchange = function(){
            changed();
        };
        line2.appendChild(input_month);
 
        var btn4 = document.createElement(“DIV”);
        btn4.style.width = (cal_width/3 – 3) + “px”;
        btn4.style.height = pane_height + “px”;
        btn4.style.lineHeight = pane_height + “px”;
        btn4.style.textAlign = “center”;
        btn4.innerHTML = “>”;
        btn4.style.cursor = “pointer”;
        btn4.style.cssFloat = “left”;
        btn4.onclick = function(){
            if(isValidated()){
                var old_month =
parseInt(document.getElementById(“input_month”).value)
                if(old_month < 12){
                    var year =
parseInt(document.getElementById(“input_year”).value);
                    var month =
parseInt(document.getElementById(“input_month”).value) + 1;
                    var val = year + separator + month + separator +
1;
                    init(val);
                }
                else {
                    var year =
parseInt(document.getElementById(“input_year”).value) + 1;
                    var month = 1;
                    var val = year + separator + month + separator +
1;
                    init(val);
                }
            }
        };
        line2.appendChild(btn4);
 
        cal_body.appendChild(line1);
        cal_body.appendChild(line2);
 
        for(var i=0; i < 7; i++){
            var pane = document.createElement(“DIV”);
            pane.className = “pane”;
            pane.style.width = pane_height + “px”;
            pane.style.height = pane_height + “px”;
            pane.style.lineHeight = pane_height + “px”;
            pane.style.textAlign = “center”;
            pane.style.cssFloat = “left”;
            pane.innerHTML = days[i];
            cal_body.appendChild(pane);
        }
        init(calendar.value);
    }
}
 
function init(val){
    clearPane();
 
    var cal_body = document.getElementById(“cal_body”);
    var temp_date;
    var year;
    var month;
    var date;
 
    if(val == “”){
        temp_date = today;
        calendar.value = today.toFormatString(separator);
    }
    else{
        year = val.year();
        month = val.month(separator);
        date = val.date(separator);
        temp_date = new Date(year,month,date);
    }
 
    year = temp_date.getFullYear();
    month = temp_date.getMonth() + 1;
    date = temp_date.getDate();
    temp_date.setDate(1);
 
    var start = temp_date.getDay() + 7;
    var end;
 
    if(array_contain(month_big, month)){
        end = start + 31;
    }
    else if(array_contain(month_small, month)){
        end = start + 30;
    }
    else{
        if(isLeapYear(year)){
            end = start + 29;
        }
        else{
            end = start + 28;
        }
    }
 
    for(var i = 7; i < start; i++){
        var pane = document.createElement(“DIV”);
        pane.className = “pane”;
        pane.style.width = pane_height + “px”;
        pane.style.height = pane_height + “px”;
        pane.style.lineHeight = pane_height + “px”;
        pane.style.textAlign = “center”;
        pane.style.cssFloat = “left”;
        cal_body.appendChild(pane);
    }
 
    for(var i = start; i < end; i++){
        var pane = document.createElement(“DIV”);
        pane.className = “pane”;
        pane.style.width = pane_height + “px”;
        pane.style.height = pane_height + “px”;
        pane.style.lineHeight = pane_height + “px”;
        pane.style.textAlign = “center”;
        pane.style.cssFloat = “left”;
        pane.innerHTML = i – start + 1;
        pane.style.cursor = “pointer”;
        pane.onmouseover = function(){
            this.style.backgroundColor = ‘#0FF’;
        }
        if(date == (i – start + 1))
            pane.style.backgroundColor = ‘#0FF’;
        else{
            pane.onmouseout = function(){
                this.style.backgroundColor = ”;
            }
        }
        pane.onclick = function(){
            calendar.value = year + separator + month + separator +
this.innerHTML;
            cal_body.parentNode.removeChild(cal_body);
        }
        cal_body.appendChild(pane);
 
        document.getElementById(“input_year”).value = year;
        document.getElementById(“input_month”).value = month;
    }
}
 
//格式化输出
Date.prototype.toFormatString  = function(separator){
    var result = this.getFullYear() + separator + (this.getMonth() + 1)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<title>Untitled Page</title>
<script type=”text/javascript”
src=”;
<style type=”text/css”>
*{margin:0;padding:0;}
body, button, input, select, textarea {
font: 12px/1.125 Arial,Helvetica,sans-serif;
}
/*日期控件*/
.pc_caldr{border:1px solid
#ccc;background-color:#fff;z-index:10;width:175px;height:auto;position:absolute;color:#000;padding:5px;}
.pc_caldr .selector{height:24px;_padding:2px 0 2px;padding:2px 0 0;}
.pc_caldr .selector .month,.pc_caldr .selector
.year{float:left;font-size:12px;width:80px;border:1px solid
#CCC;height:19px;}
.pc_caldr .selector .year{width:84px;margin-left:10px;}
.pc_caldr .weeks,.pc_caldr
.days{list-style:none;width:100%!important;margin:0;padding:0;}
.pc_caldr
.weeks{height:18px;margin-bottom:2px;background:#b6d1f9;color:#fff;font-size:12px;}
.pc_caldr .days{height:auto;font-size:12px;font-family:Arial;}
.pc_caldr .weeks li,.pc_caldr .days
li{float:left;height:20px;line-height:20px;text-align:center;width:25px;}
.pc_caldr .days li{background-color:none;}
.pc_caldr .days li
a{display:block;text-decoration:none;height:100%;color:#43609c;transition:transform
.5s;-moz-transition:-moz-transform
.5s;-webkit-transition:-webkit-transform .5s;-o-transition:-o-transform
.5s;padding:1px;}
.pc_caldr .days li a:link,.pc_caldr .days li a:visited,.pc_caldr
.days li a:hover{text-decoration:none;}
.pc_澳门新萄京官方网站,caldr .days li a strong{font-weight:400;}
.pc_caldr .days li
a:hover{background-color:#5d94e6;color:#fff;transform:rotate(180deg)
scale(1.5);-moz-transform:rotate(360deg)
scale(1.5);-webkit-transform:rotate(360deg)
scale(1.5);-o-transform:rotate(360deg) scale(1.5);}
.pc_caldr .weeks li,.pc_caldr .days li,.pc_caldr .days li
a{text-align:center;}
/*文本框*/
.tiemin{width:120px;border:1px solid #f00;}
.inline-block {display :inline-block; zoom:1 ; *display: inline;
vertical-align:middle ;}
.ie6iframe {background: none repeat scroll 0 0 #FFFFFF;left:
-1px;filter:alpha(opacity=0);position: absolute;top: 0;z-index:
-1;width:100%;height:150px;}
</style>
</head>
<body>
<a
href=””
target=”_blank” style=”color:red;border:1px solid
red;display:block;margin:20px
auto;width:300px;font-size:14px;padding:3px;”>作者nothing</a>
<div style=”height: 200px;”>
</div>
<input type=”text” class=”tiemin” readonly=”readonly” />
<div style=”height: 200px;”>
</div>
<span style=”width: 200px;” class=”inline-block”></span>
<input type=”text” class=”tiemin” readonly=”readonly” />
<div style=”width: 300px; height: 100px; margin-left: 210px;”>
<select>
<option>挡住它nothing</option>
</select>
</div>
<script type=”text/javascript”>
var nothingTime = (function ($) {
var cache = {
obj: null,
calendar: null,
disappear: function () { //隐藏时间块
cache.calendar.css(“display”, “none”);
},
isLeap: function (year) { //闰年
return (year % 100 == 0 ? (year % 400 == 0 ? 1 : 0) : (year % 4 == 0 ? 1
: 0));
},
isValid: function (d) { //是否在今天以前
return (d.getTime() – (new Date()).getTime() < 0) ? true : false;
},
td: new Date(),
createData: function (year, month) {
var n1 = new Date(year, month, 1),
firstday = n1.getDay(),
mdays = [31, 28 + this.isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31,
30, 31],
ul = document.createElement(“ul”), li;
ul.className = “days”;
$(“#calendar”).find(“.days”).remove();
for (var i = firstday;i–;) { //建立前面无效的几天
ul.appendChild(document.createElement(“li”));
}
for (var j = 1; j <= mdays[month]; j++) {
if (this.isValid(new Date(year, month, j))) { //今天以前的日子
li = document.createElement(“li”);
li.innerHTML = “<a href=’javascript:void(0)’>” + j +
“</a>”;
ul.appendChild(li);
} else {
li = document.createElement(“li”);
li.innerHTML = j;
ul.appendChild(li);
}
}
this.calendar[0].appendChild(ul);
},
change: function () { //给下拉列表绑定时间
var a = $(“#calendar .month”),
b = $(“#calendar .year”);
a.change(function () {
cache.createData(b.attr(“value”), $(this).attr(“value”));
});
b.change(function () {
cache.createData($(this).attr(“value”), a.attr(“value”));
});
cache.calendar.delegate(“.days a”, “click”, function () {
var day = b.attr(“value”) + “-” + (parseInt(a.attr(“value”)) + 1) + “-“

网站地图xml地图