js多选择日期日历 -

哗哗流水

浏览: 63099 次
性别:
来自: 北京

最近访客更多访客>>

liuqimeng1

Odysseus_110

hackWang

Tom.X

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js多选择日期日历

博客分类：

项目需要一个可以选择多个日期的日期选择框，在网上找了几个小时，终于找到了一个靠谱的！

使用方法:

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

或者用button调用也行

<input type="text" name="dateBegin" readonly><buttononclick="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) {
    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 getWeekDay(year, month, day) {
    var d = new Date();
    d.setFullYear(year);
    d.setMonth(month - 1);
    d.setDate(day);
    s = d.getDay();
    return s;
}

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

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);
}