再贡献，日期下拉控件

/**
 * 下拉日期控件，支持Date和DateTime两种格式，继承自Dropdown
 * @author：熊水林
 * @created：2009-8-7
 * @lastModified：2009-8-8
 */
var Dropdown_Calendar={
    /**protected**/
    getShowStr : function(dropDown){
        dropDown.setMultiple(false);
        var value = dropDown.srcObj.value.trim();
        if (dropDown.options.length>0 && value==""){
            value = dropDown.options[0].value;
        }
        var type = dropDown.date_type ? dropDown.date_type : 1;
        var theDate = new Date();
        if (value != ""){
            var dateStr = getDigit(value);
            theDate = dateStr.toDate(type==2?"yyyy-MM-dd HH:mm:ss":"yyyy-MM-dd");
        }
        var eltName = dropDown.dispObj.id;
        makeCalendarGrids(theDate, eltName, type);
        this.writeDateBack(eltName, type);
    },
    /**无需实现**/
    initSelectedItem : function(dropDown){
    },
    writeDateBack : function(eltName, type){
        var textObjId = eltName.substring("div_disp_".length, eltName.length);
        var date = __getDate(eltName,type);
        document.getElementById(textObjId).value = date.Format(type==2?"yyyy-MM-dd HH:mm:ss":"yyyy-MM-dd");
    },
    clearDateBack : function(eltName){
        var textObjId = eltName.substring("div_disp_".length, eltName.length);
        document.getElementById(textObjId).value = "";
    }
}

function cancelBubble(event){
    event.cancelBubble = true;
}

 

 

 

var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月");

var today = new getToday();
function getToday() {
    now = new Date();
    this.year = now.getFullYear();
    this.month = now.getMonth()+1;
    this.day = now.getDate();
    this.hours = now.getHours();
    this.minutes = now.getMinutes();
    this.seconds = now.getSeconds();
}
String.prototype.trim=function() {   return this.replace(/(^/s*)|(/s*$)/g,"");}

function makeCalendarGrids(date,eltName,type) {
    var daysGrid = '<table cellpadding="0" cellspacing="0" border="1" class="table-outer">'
        + '  <tr><td>'+makeControlGrids(date,eltName,type)+ '</td></tr>'
        + '  <tr><td>'+makeOneMonthGrids(date,eltName,type)+ '</td></tr>';
    if (type == 2) {
        daysGrid += '  <tr><td>'+ makeTimestampGrids(date,eltName,type)+'</td></tr>';
        daysGrid += '  <tr><td>'+makeButtonGrids(eltName,type)+'</td></tr>';
    }
    daysGrid += '</table>';
    document.getElementById(eltName).innerHTML = daysGrid;
}
function makeControlGrids(date,eltName,type){
    var year = date.getFullYear();
    var month = date.getMonth();
    var funCode = '__incYear($,/'' + eltName + '/', ' +type+')';
    var daysGrid =
          '<table cellpadding="0" cellspacing="0" class="table-footer">'
        + '  <tr height="18" valign=top><td align="center" width="55%">';
    daysGrid += '<a onClick="'+funCode.replace("$","-10")+'" class="increase-symbol">7</a>'
        + '<a onClick="'+funCode.replace("$","-1")+'" class="increase-symbol">3</a>'
        + '<input type="text" id="_calendar_grids_'+eltName+'_year_" size="4" maxlength="4" tabIndex="-1" style="background-color:transparent;border:0;'
        + (today.year==year ? 'color:red;' : '')
        + 'font:10pt;font-weight:bold" value="'+year+'" οnkeypress="return Keyboard.filterKeycodeNumber(event);" οnclick="this.select();cancelBubble(event);" οnblur="__setYear(this.value,/''+eltName+'/','+type+')">';
    daysGrid += '<a onClick="'+funCode.replace("$","1")+'" class="increase-symbol">4</a>'
        + '<a onClick="'+funCode.replace("$","10")+'" class="increase-symbol">8</a>';
    daysGrid += '</td><td align="center" width="55%">';

    daysGrid += '<select id="_calendar_grids_'+eltName+'_month_" tabIndex="-2" οnclick="cancelBubble(event);" οnchange="__setMonth(this,/''+eltName+'/','+type+')" class="month" '
        + (today.month==month+1&&today.year==year ? 'style="color:red;"' : '') +'>';
    for (var i=0; i<12; i++){
        daysGrid += '<option value='+i;
        if (i==month){ daysGrid +=' selected '; }
        daysGrid +='>'+months[i]+'</option>';
    }
    daysGrid += '</select>';
    daysGrid += '</td></tr></table>';
    return daysGrid;
}
function makeOneMonthGrids(date, eltName, type){
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var _day = date.getDate();
    var weekDay = new Date(year,month-1,1).getDay();
    var daysGrid = '<table cellpadding="0" cellspacing="0" class="table-inner">'
         + '  <tr align="center" class="calendar-header"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'
         + '<input type="hidden" id="_calendar_grids_'+eltName+'_day_" value="'+_day+'">';
    var maxDays = getMaxDayOfMonth(year, month);
    var isToday = (year==today.year) && (month==today.month);
    for (var intWeek=0; intWeek<6; intWeek++) {
        var dayOfMonth;
        daysGrid +='<tr>';
        for (var intDay=0; intDay<7; intDay++) {
            dayOfMonth = intWeek*7 + intDay - weekDay + 1;
            if (dayOfMonth<=0 || dayOfMonth>maxDays) {
                daysGrid += "<td>&nbsp;</td> ";
            }else{
                daysGrid += '<td align="center" ';
                if (dayOfMonth==_day)    daysGrid += 'bgcolor="#FFFF00"';
                daysGrid += '><span style="cursor:hand" onClick="__setDay(this,/''+eltName+'/','+type+')" '
                    + 'style="color:'+(isToday&&dayOfMonth==today.day?'#FF0000':'#000000')+'">' + dayOfMonth + "</span></td>";
            }
        }
        daysGrid +='</tr>';
        if (dayOfMonth > maxDays)    break;
    }
    daysGrid += "</table>";
    return daysGrid;
}
function makeTimestampGrids(date, eltName, type){
    var funCode_h = "__incHours($,'" + eltName + "',"+type+")";
    var funCode_m = "__incMinutes($,'" + eltName + "',"+type+")";
    var funCode_s = "__incSeconds($,'" + eltName + "',"+type+")";
    var daysGrid = '<table border=0 cellpadding="0" cellspacing="0" class="table-inner" height="22"><tr align="center"><td>&nbsp';
        /*daysGrid += '<a style="cursor:hand" onClick="incHours(-10,/'' + eltName + '/', /'' +type+'/')"><font size=1>&#9668;&#9668;</font></a>&nbsp;&nbsp;';*/
        daysGrid += '<a onClick="' + funCode_h.replace("$","-1") + '" class="increase-symbol">3</font></a>';
        daysGrid += '<input size="1" id="_calendar_grids_'+eltName+'_hour_" maxlength=2 style="border:0;color:red;font:9pt" value='+ date.getHours();
        daysGrid += '  οnkeypress="return Keyboard.filterKeycodeNumber(event);" οnfοcus="this.select();" οnblur="__setHours(this,/''+eltName+'/','+type+');"></font>';
        daysGrid += '<a onClick="' + funCode_h.replace("$","1") + '" class="increase-symbol">4</font></a>&nbsp;';
        /*daysGrid += '<a style="cursor:hand" onClick="incHours(10,/'' + eltName + '/', /'' +type+'/')"><font size=1>&#9658;&#9658;</font></a>';*/
        daysGrid += '时&nbsp;</td><td>';
        /*daysGrid += '<a style="cursor:hand" onClick="incMinutes(-10,/'' + eltName + '/', /'' +type+'/')"><font size=1>&#9668;&#9668;</font></a>&nbsp;&nbsp;';*/
        daysGrid += '<a onClick="' + funCode_m.replace("$","-1") + '" class="increase-symbol">3</font></a>';
        daysGrid += '<input size="1"  id="_calendar_grids_'+eltName+'_minute_" maxlength=2 style="border:0;color:red;font:9pt" value='+ date.getMinutes();
        daysGrid += ' οnkeypress="return Keyboard.filterKeycodeNumber(event);" οnfοcus="this.select();" οnblur=/"__setMinutes(this,/''+eltName+'/','+type+');/"></font>';
        daysGrid += '<a onClick="' + funCode_m.replace("$","1") + '" class="increase-symbol">4</font></a>&nbsp;';
        /*daysGrid += '<a style="cursor:hand" onClick="incMinutes(10,/'' + eltName + '/', /'' +type+'/')"><font size=1>&#9658;&#9658;</font></a>';*/
        daysGrid += '分&nbsp;</td><td>';
        /*daysGrid += '<a style="cursor:hand" onClick="incSeconds(-10,/'' + eltName + '/', /'' +type+'/')"><font size=1>&#9668;&#9668;</font></a>&nbsp;&nbsp;';*/
        daysGrid += '<a onClick="' + funCode_s.replace("$","1") + '" class="increase-symbol">3</font></a>';
        daysGrid += '<input size="1"  id="_calendar_grids_'+eltName+'_second_" maxlength=2 style="border:0;color:red;font:9pt" value='+ date.getSeconds();
        daysGrid += ' οnkeypress="return Keyboard.filterKeycodeNumber(event);" οnfοcus="this.select();" οnblur=/"__setSecond(this,/''+eltName+'/','+type+');/"></font>';
        daysGrid += '<a onClick="' + funCode_s.replace("$","1") + '" class="increase-symbol">4</font></a>&nbsp;';
        /*daysGrid += '<a style="cursor:hand" onClick="incSeconds(10,/'' + eltName + '/', /'' +type+'/')"><font size=1>&#9658;&#9658;</font></a>';*/
        daysGrid += '秒&nbsp;</td></tr></table>';
    return daysGrid;
}
function makeButtonGrids(eltName,type){
    var daysGrid = '<table cellpadding="0" cellspacing="0" height="24" class="table-footer"><tr><td align="center">'
         + '<span style="cursor:hand" onClick="Dropdown_Calendar.writeDateBack(/''+eltName+'/','+type+')"><img src="tools-button.gif" >&nbsp;确定</span>'
         + '&nbsp;&nbsp;&nbsp;<span style="cursor:hand" onClick="Dropdown_Calendar.clearDateBack(/''+eltName+'/')"><img src="tools-button.gif">&nbsp;清空</span>'
         + '</td></tr></table>';
    return daysGrid;
}

function __incYear(offsest,eltName,type){
    cancelBubble(event);
    var object = document.getElementById("_calendar_grids_"+eltName+"_year_");
    object.value = parseInt(object.value,10) + offsest;
    __setYear(object, eltName, type);
}
function __incHours(offsest,eltName,type){
    cancelBubble(event);
    var object = document.getElementById("_calendar_grids_"+eltName+"_hour_");
    object.value = parseInt(object.value,10) + offsest;
    __setHours(object, eltName, type);
}
function __incMinutes(offsest,eltName,type){
    cancelBubble(event);
    var object = document.getElementById("_calendar_grids_"+eltName+"_minute_");
    object.value = parseInt(object.value,10) + offsest;
    __setMinutes(object, eltName, type);
}
function __incSeconds(offsest,eltName,type){
    cancelBubble(event);
    var object = document.getElementById("_calendar_grids_"+eltName+"_second_");
    object.value = parseInt(object.value,10) + offsest;
    __setSeconds(object, eltName, type);
}
function __getDate(eltName, type){
    var prefix = "_calendar_grids_"+eltName;
    var year = parseInt(document.getElementById(prefix+"_year_").value);
    var month = parseInt(document.getElementById(prefix+"_month_").value);
    var day = parseInt(document.getElementById(prefix+"_day_").value);
    var date = new Date(year,month,day);
    if (type == 2){
        var hours = parseInt(document.getElementById(prefix+"_hour_").value);
        var minute = parseInt(document.getElementById(prefix+"_minute_").value);
        var second = parseInt(document.getElementById(prefix+"_second_").value);
        date.setHours(hours);
        date.setMinutes(minute);
        date.setSeconds(second);
    }
    return date;
}
function __setYear(element, eltName, type){
    var year = parseInt(element.value, 10);
    if (year<1900)     year = 1900;
    else if (year>2100)     year = 2100;
    element.value = year;
    makeCalendarGrids(__getDate(eltName,type), eltName, type);
}
function __setMonth(element, eltName, type){
    makeCalendarGrids(__getDate(eltName,type), eltName, type);
}
function __setDay(element, eltName,type){
    document.getElementById("_calendar_grids_"+eltName+"_day_").value = element.innerText;
    if (type == 2){
        makeCalendarGrids(__getDate(eltName,type), eltName, type);/*remake not be closed*/
    }
    Dropdown_Calendar.writeDateBack(eltName, type);
}
function __setHours(element, eltName, type){
    var hours = parseInt(element.value, 10);
    if (hours<0 || hours>23)    hours = 0;
    element.value = hours;
    makeCalendarGrids(__getDate(eltName,type), eltName, type);
}
function __setMinutes(element, eltName, type){
    var minute = parseInt(element.value, 10);
    if (minute<0 || minute>59)    minute = 0;
    element.value = minute;
    makeCalendarGrids(__getDate(eltName,type), eltName, type);
}
function __setSeconds(element, eltName, type){
    var second = parseInt(element.value, 10);
    if (second<0 || second>59)    second = 0;
    element.value = second;
    makeCalendarGrids(__getDate(eltName,type), eltName, type);
}

 

 

html--------------------------------------

var dd3 = new Dropdown(document.getElementById("test3"));
dd3.setType("calendar");
dd3.setLoader("dd3");
dd3.addItem("2009-08-08 20:08:08", "2009-08-09 20:08:08");
dd3.date_type = 1;

 

document.documentElement.attachEvent("onclick", function(){dd3.hide()});

css----------------------------------------

.table-outer{
    width: 180px;
    border: 0px;
    text-align: center;
    border-collapse: collapse;
}
.table-inner{
    width: 100%;
    background-color: #FFFFFF;
    font-size: 12px;
    border: 0px;
}
.table-footer{
    width: 100%;
    background-color: #B3D7D7;
    font-size: 12px;
    border: 0px;
}
.increase-symbol{
    font-family:Webdings;
    font-size: 11px;
    cursor: hand;
}
.calendar-header{
    background-color: #CCEEDD;
    border-bottom: solid 1px #99FFEE;
    height:20px;
}
select.month{
    font-size:12px;
    font-weight:bold;
    height:22px;
    background-color:#B3D7D7;
    border: #000000 solid 1px;
}