用Javascript写的日期输入控件 - 达人(Samuel)

2005/03/16 | 用Javascript写的日期输入控件
类别(Programme) | 评论(3) | 阅读(1046) | 发表于 11:58: /*
* Calendar v1.2 Build 5.4.6 Power by Ivan
*/
//============================== 定义属性 ==========
var calendarDisplay = false; //是否显示
var yearBegin = 2004; //开始时间
var yearEnd = getNow(1); //截至年
var monthEnd = getNow(2); //截至月
var dayEnd = getNow(3); //截至日
var dayStrDef = "<table class=\"calendar\" width='100%' cellpadding='0' border='1' bordercolorlight='#C0C0C0' bordercolordark='#C0C0C0'><tr>";
var dayStr = dayStrDef;
var yearC = yearEnd;
var monthC = monthEnd;
var dayC = dayEnd;
var dateFormat = "yyyy-MM-dd"; //自定义格式
var dateObj;
var statStr = "Calendar v1.2 Build 4.6";

/*===== 取得当前时间: 0.all; 1.year; 2.month; 3.day; 4.week; ========================================*/
function getNow(dateType) {
    var dateTemp = new Date();
    switch (dateType) {
        case 0:
            nowTemp = dateTemp.getYear() + "-" + (dateTemp.getMonth()+1) + "-" + dateTemp.getDate();
            break;
        case 1:
            nowTemp = dateTemp.getYear();
            break;
        case 2:
            nowTemp = dateTemp.getMonth();
            break;
        case 3:
            nowTemp = dateTemp.getDate();
            break;
        case 4:
            nowTemp = dateTemp.getDay();
            break;
    }
    return nowTemp;
}

/*===== 生成日历 ========================================*/
function createCalendar() {
    dayStr = dayStrDef;
    var lastDay = getLastDay(yearC, parseInt(monthC)+1);
    var startDay = getWeekDay(yearC, parseInt(monthC)+1, 1);
//    alert (lastDay + "/" + startDay);
    var d = 1;
    for (w=0; w<=lastDay+startDay-1; w++) {
        if (w!=0 && w%7==0) {
            dayStr += "</tr><tr>";
        }
        if (w >= startDay) {
            dayStr += "<td onclick='returnDate("+d+");' style='cursor:hand' onMouseOver='this.className=\"mouseOver\"' onMouseOut='this.className=\"mouseOut\"'>";
            if (yearC==getNow(1) && monthC==getNow(2) && d == getNow(3)) {
                dayStr += "<b><font color=red>";
            }
            dayStr += d;
            d++;
        }
        else {
            dayStr += "<td>";
            dayStr += " ";
        }
    }
    dayStr += "</tr></table>";
    return dayStr;
}

function getWeekDay(year, month, day) {
    var d = new Date();
    d.setFullYear(year);
    d.setMonth(month-1);
    d.setDate(day);
    s = d.getDay();
    return s;
}

/*===== 取得当月的天数 ========================================*/
function getLastDay(year, month) {
    if (month < 8) {
        if (month%2 != 0) {
            return 31;
        }
        if (month == 2) {
            if (year % 4 == 0) {
                return 29;
            }
            return 28;
        }
        else {
            return 30;
        }
    }
    if (month%2 != 0) {
        return 30;
    }
    return 31;
}

/*===== 将值返回给文本框 ========================================*/
function returnDate(day) {
    dayC = day;
    datevalue = dateFormat.replace("yyyy", yearC);
    datevalue = datevalue.replace("MM", one2two(parseInt(monthC)+1));
    datevalue = datevalue.replace("dd", one2two(dayC));
    dateObj.value = datevalue;
//    dateObj.value = yearC + "-" + one2two(parseInt(monthC)+1) + "-" + one2two(dayC);
    calendarDisplay = true;
    calendarShow();
}

function one2two(d) {
    var s = d;
    if (d<10) {
    s = "0" + d;
    }
return s;
}

/*===== 减少/增多年或月 ========================================*/
function selectCalendar(dateType, datevalue) {
    var d = new Date(yearC, monthC, dayC);
    if (dateType == "year") {
        year = parseInt(yearC) + datevalue;
        if ( year >= yearEnd) {
            year = yearEnd;
            if (monthC > monthEnd) {
                d.setMonth(monthEnd);
            }
        }
        if (year < yearBegin) {
            year = yearBegin;
        }
        d.setFullYear(year);
    }
    if (dateType == "month") {
        month = parseInt(monthC) + datevalue;
        if (yearC >= yearEnd && month > monthEnd) {
            month = monthEnd;
            calendarState.innerHTML="已达最大月份";
        }
        if (yearC == yearBegin && month < 0) {
            month = 0;
            calendarState.innerHTML="已达最小月份";
        }
        d.setDate(1);
        d.setMonth(month);
    }
    yearC = d.getYear();
    monthC = d.getMonth();
//    dayC = d.getDate();
    setCalendarDef();
    daySpace.innerHTML = createCalendar();
}

/*===== 根据文本框的位置显示日历 ========================================*/
function calendarShow(calendarObj) {
    if (calendarDisplay) {
        calendar.style.display = "none";
//        calendarDisplay = false;
        dayStr = dayStrDef;
        return;
    }
    else {
        dateObj = calendarObj;
        calendar.style.display = "block";
//        calendarDisplay = true;
    }
    createSelect(document.all.calendarYear, yearBegin, yearEnd, "year");
    createSelect(document.all.calendarMonth, 1, 12, "month");
    setCalendarDef();
    objL = document.body.scrollLeft+window.event.x - 10;//calendarObj.getBoundingClientRect().left;
    objT = calendarObj.getBoundingClientRect().top + calendarObj.clientHeight;
    calendar.style.left = objL - 2;
    calendar.style.top = objT + 1;
    setCalendarvalue();
    daySpace.innerHTML = createCalendar();
}

/*===== 给select充入数据 ========================================*/
function createSelect(selectObj, begin, end, selectType) {
//    alert (begin + "/" + end);
    for (i=begin; i<=end; i++) {
        value = i;
        if (selectType == "month") {
             var value = i - 1;
        }
        selectObj.options[i-begin] = new Option(i,value);
    }
}

/*===== 设置select默认状态 ========================================*/
function defSelect(selectObj, defvalue) {
    for (i=0; i<selectObj.length; i++) {
        if (selectObj.options[i].value == defvalue) {
            selectObj.options[i].selected = true;
            return;
        }
    }
}

/*===== 对year/month/day赋值并显示对应的日历 ================================*/
function setCalendarvalue() {
    yearC = document.all.calendarYear.value;
    monthC = document.all.calendarMonth.value;
    daySpace.innerHTML = createCalendar();
}

//================================================== Validate =====
String.prototype.trim = function() { //String's Trim()
return this.replace(/(^\s*)|(\s*$)/g, "");
}

function isNull(strTemp) { //判断是否为空
if (strTemp == null || strTemp.trim() == "") {
        return true;
    }
    return false;
}

//=============================================================
//================================================ Main() =====
function setCalendarDef() {
    defSelect(document.all.calendarYear, yearC);
    defSelect(document.all.calendarMonth, monthC);
}

function calendarHidden() {
    if (calendarDisplay) {
        calendarShow();
        calendarDisplay = false;
    }
    else if (calendar.style.display == "block") {
        calendarDisplay = true;
    }
}
document.onclick = calendarHidden;
cStr = "<style>.calendar {border-collapse: collapse;text-align:center}td {font-size:9pt;font-family:宋体;} .title01 {background-color:#008080;color:#FFFFFF;} input {font-size:9pt;font-family:宋体;}select {font-size:9pt;font-family:宋体;}.mouseOver {background-color: #e6e7e8;}.mouseOut {background-color: #ffffff;}</style>";
cStr += "<div onclick='calendarDisplay=false' id='calendar' Author='smart' style=\"background-color=#ffffff; display:none;position: absolute;z-index:0;filter :\'progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#787878,strength=5)\'\">";
cStr += "<table class=\"calendar\" cellpadding='0' border='1' width='160' bordercolorlight='#000000' bordercolordark='#000000'>";
cStr += "<tr><td colspan='7' bgcolor='#E1E1E1'>";
cStr += "<span style='cursor:hand' onclick='selectCalendar(\"year\",-1)' onMouseOut=\"calendarState.innerHTML=statStr\"><<</span> <span style=\"cursor:hand\" onclick=\"selectCalendar('month',-1)\" onMouseOut=\"calendarState.innerHTML=statStr\"><</span>";
cStr += " <select name=\"calendarYear\" onChange=\"setCalendarvalue()\"></select><select name=\"calendarMonth\" onChange=\"setCalendarvalue()\"></select> ";
cStr += "<span style=\"cursor:hand\" onclick=\"selectCalendar('month',1)\" onMouseOut=\"calendarState.innerHTML=statStr\">></span> <span style=\"cursor:hand\" onclick=\"selectCalendar('year',1)\" onMouseOut=\"calendarState.innerHTML=statStr\">>></span></td>";
cStr += "</tr><tr class=\"title01\"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>";
cStr += "<tr><td colspan=\"7\"><div id=\"daySpace\"></div></td></tr>";
cStr += "<tr><td colspan=\"7\" bgcolor=\"#E1E1E1\"><table width=\"100%\" cellpadding='0'><tr><td width=\"80%\">";
cStr += "<div style=\"font-family:Arial;font-size:8pt\" id=\"calendarState\" onDblclick=\"calendarState.innerHTML='又是新的一天，加油吧'\" onMouseOut=\"calendarState.innerHTML='"+statStr+"'\">"+statStr+"</div>";
cStr += "</td><td><span style=\"font-family:Arial;font-size:8pt;color:ff0000;cursor:hand\" onclick=\"calendarHidden()\">[关闭]</span></td></tr></table></td></tr></table></div>";
document.write(cStr);

-----------------------------------------------------------------------

调用方法很简单：
<input type="text" name="dateBegin" onclick="calendarShow(this)" readonly>

或者用button调用也行

<input type="text" name="dateBegin" readonly><button onclick="calendarShow(document.all.dateBegin)">选择日期</button>

起始日期与截止日期可以自己根据需要再二次定义。
呵呵，里面还写了彩蛋，是With Love里晴天公仔说的话。：P

ps:已经是第3次修改了~（2005年04月06日）
·增加了自定义输出格式；
·点击日历以外，日历会自动隐藏；
·修改了一些日期不准确的小Bug；
·日历增加了阴影；; 0

http://samuel.5d.cn/

我是来买馒头的~

评论Comments