项目需要一个可以选择多个日期的日期选择框，从网上找到一个单选的选择框源码（http://blog.5d.cn/user2/samuel/200503/61881.html），修改成可以多选。使用方法:调用方法很简单：<input type="text" name="dateBegin" onclick="calendarShow(this)" readonly>或者用button调用也行<input type="text" name="dateBegin" readonly><button onclick="calendarShow(document.all.dateBegin)">选择日期</button>得到的结果(dateBegin的Value值)是多个日期值，会使用";"进行间隔,如:2010-10-23;2010-12-24这样的。当然最开始的时候你也需要这样给这个栏位初始值。还有就是当初设计的哥哥比较黑，最大的月份是当前月份，我修改为了2999-12-31. V1.1修改部分:1)增加两种新的调用方法calendarShow1(this)==>设定只能输入一个日期calendarShowN(this,n)==>自己设定最多可以输入的日期数，如果开始给那个栏位赋值就更多，就无法增加calendarShow(this) ==>为了兼容性，默认最大的值为200，建议不要使用这个了2)Fix 闰年的Bug。3)改为英文版 增加两个function,一个为日期单选calendarShow1，一个为日期多选为calerdarShowM，后者还可以设定一个参数，允许最多的日期数。 //============================== 定义属性 ==========var calendarDisplay = false; //是否显示var yearBegin = 2004; //开始时间var yearEnd = 2999; //截至年var monthEnd = 12; //截至月var dayEnd = 31; //截至日var dayStrDef = "<table class=\"calendar\" width=‘100%‘ cellpadding=‘0‘ border=‘1‘ bordercolorlight=‘#C0C0C0‘ bordercolordark=‘#C0C0C0‘><tr>";var dayStr = dayStrDef;var yearC = getNow(1);var monthC = getNow(2);var dayC = getNow(3);var dateFormat = "yyyy-MM-dd"; //自定义格式var dateObj; //和外部的交換控件var statStr = "";var dateList; //日期列表var maxLen=200;//日期的最大長度,如果沒有指定，為100function 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);    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=‘changeDateList(" + d + ");daySpace.innerHTML = createCalendar();‘ style=‘cursor:hand‘ onm ouseOver=‘this.className=\"mouseOver\"‘ onm ouseOut=‘this.className=\"mouseOut\"‘>";            if (isInDateList(d)) {                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 % 400 == 0 || (year % 100 !=0 && year %4 ==0 )) {                return 29;            }            return 28;        }        else {            return 30;        }    }    if (month % 2 != 0) {        return 30;    }    return 31;}function one2two(d) {    var s = d;    if (d < 10) {        s = "0" + d;    }    return s;}function transferDate(day) {    dayC = day;    datevalue = http://www.mamicode.com/dateFormat.replace("yyyy", yearC);    datevalue = http://www.mamicode.com/datevalue.replace("MM", one2two(parseInt(monthC) + 1));    datevalue = http://www.mamicode.com/datevalue.replace("dd", one2two(dayC));    return datevalue;}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 = "Max month";        }        if (yearC == yearBegin && month < 0) {            month = 0;            calendarState.innerHTML = "Min month";        }        d.setDate(1);        d.setMonth(month);    }    yearC = d.getYear();    monthC = d.getMonth();     setCalendarDef();    daySpace.innerHTML = createCalendar();}function initDateList(dateObj) {    var str = dateObj.value;    if (str.trim() == "") {        dateList = new Array();    } else {        dateList = str.split(";");    }    checkLength();}function changeDateList(day) {    var str1 = transferDate(day);    for (i = 0; i < dateList.length; i++) {        if (dateList[i] == str1) {            dateList.splice(i, 1);            saveDateList();            return;        }    }    if (checkLength()) {        dateList[dateList.length] = str1;        saveDateList();        return;    } else if (maxLen == 1) {        dateList[0] = str1;        saveDateList();        return;    }}function checkLength() {    if (dateList.length >= maxLen) {        calendarState.innerHTML = "too long";        return false;    }    return true;}function saveDateList() {    dateObj.value = http://www.mamicode.com/dateList.join(";");}function isInDateList(day) {    var str1 = transferDate(day);    for (i = 0; i < dateList.length; i++) {        if (dateList[i] == str1) {                      return true;        }    }    return false;}function calendarShow(calendarObj) {    if (calendarDisplay) {        calendar.style.display = "none";             dayStr = dayStrDef;        return;    }    else {        dateObj = calendarObj;        calendar.style.display = "block";        initDateList(dateObj);           }    createSelect(document.all.calendarYear, yearBegin, yearEnd, "year");    createSelect(document.all.calendarMonth, 1, 12, "month");    setCalendarDef();    objL = document.body.scrollLeft + window.event.x - 10;    objT = calendarObj.getBoundingClientRect().top + calendarObj.clientHeight;    calendar.style.left = objL - 2;    calendar.style.top = objT + 1;    setCalendarvalue();    daySpace.innerHTML = createCalendar();}function calendarShow1(calendarObj) {    maxLen=1;    calendarShow(calendarObj);  }function calendarShowN(calendarObj, maxLength) {    maxLen = maxLength;    calendarShow(calendarObj);   }function createSelect(selectObj, begin, end, selectType) {    for (i = begin; i <= end; i++) {        value = http://www.mamicode.com/i;"month") {            var value = http://www.mamicode.com/i - 1;"");}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;fontFamily=arial,sans-serif;} .title01 {background-color:#008080;color:#FFFFFF;} input {font-size:9pt;fontFamily=arial,sans-serif;}select {font-size:9pt;font-family:arial,sans-serif;}.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)‘ onm ouseOut=\"calendarState.innerHTML=statStr\"><<</span> <span style=\"cursor:hand\" onclick=\"selectCalendar(‘month‘,-1)\" onm ouseOut=\"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)\" onm ouseOut=\"calendarState.innerHTML=statStr\">></span> <span style=\"cursor:hand\" onclick=\"selectCalendar(‘year‘,1)\" onm ouseOut=\"calendarState.innerHTML=statStr\">>></span></td>";cStr += "</tr><tr class=\"title01\"><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</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=\"60%\">";cStr += "<div style=\"font-family:Arial;font-size:8pt\" id=\"calendarState\" onDblclick=\"calendarState.innerHTML=‘‘\" onm ouseOut=\"calendarState.innerHTML=‘" + statStr + "‘\">" + statStr + "</div>";cStr += "</td><td><span style=\"font-family:Arial;font-size:8pt;color:ff0000;cursor:hand\" onclick=\"saveDateList();calendarHidden();\">[save]</span><span style=\"font-family:Arial;font-size:8pt;color:ff0000;cursor:hand\" onclick=\"calendarHidden()\">[Close]</span></td></tr></table></td></tr></table></div>";document.write(cStr);