项目需要一个可以选择多个日期的日期选择框,在网上找了几个小时,终于找到了一个靠谱的!
使用方法:
调用方法很简单:
<input type="text" name="dateBegin" οnclick="calendarShow(this)" readonly>
或者用button调用也行
<input type="text" name="dateBegin" readonly><button οnclick="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;//日期的最大長度,如果沒有指定,為100
function getNow(dateType) {
}
function createCalendar() {
}
function getWeekDay(year, month, day) {
}
function getLastDay(year, month) {
}
function one2two(d) {
}
function transferDate(day) {
}
function selectCalendar(dateType, datevalue) {
}
function initDateList(dateObj) {
}
function changeDateList(day) {
}
function checkLength() {
}
function saveDateList() {
}
function isInDateList(day) {
}
function calendarShow(calendarObj) {
}
function calendarShow1(calendarObj) {
}
function calendarShowN(calendarObj, maxLength) {
}
function createSelect(selectObj, begin, end, selectType) {
}
function defSelect(selectObj, defvalue) {
}
function setCalendarvalue() {
}
//================================================== Validate =====
String.prototype.trim = function () { //String's Trim()
}
function isNull(strTemp) { //判断是否为空
}
//=============================================================
//================================================ Main() =====
function setCalendarDef() {
}
function calendarHidden() {
}
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 οnclick='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' οnclick='selectCalendar(\"year\",-1)' onMouseOut=\"calendarState.innerHTML=statStr\"><<</span> <span style=\"cursor:hand\" οnclick=\"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\" οnclick=\"selectCalendar('month',1)\" onMouseOut=\"calendarState.innerHTML=statStr\">></span> <span style=\"cursor:hand\" οnclick=\"selectCalendar('year',1)\" onMouseOut=\"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=''\" onMouseOut=\"calendarState.innerHTML='" + statStr + "'\">" + statStr + "</div>";
cStr += "</td><td><span style=\"font-family:Arial;font-size:8pt;color:ff0000;cursor:hand\" οnclick=\"saveDateList();calendarHidden();\">[save]</span><span style=\"font-family:Arial;font-size:8pt;color:ff0000;cursor:hand\" οnclick=\"calendarHidden()\">[Close]</span></td></tr></table></td></tr></table></div>";
document.write(cStr);