`

js多选择日期日历

    博客分类:
  • js
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 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' onMouseOver='this.className=\"mouseOver\"' onMouseOut='this.className=\"mouseOut\"'>";
            if (isInDateList(d)) {
                dayStr += "<b><font color=red>";
            }             
            dayStr += d;
            d++;
        }
        else {
            dayStr += "<td>";
            dayStr += "&nbsp;";
        }
    }
    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 = dateFormat.replace("yyyy", yearC);
    datevalue = datevalue.replace("MM", one2two(parseInt(monthC) + 1));
    datevalue = 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 = 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 = i;
        if (selectType == "month") {
            var value = i - 1;
        }
        selectObj.options[i - begin] = new Option(i, value);
    }
}


function defSelect(selectObj, defvalue) {
    for (i = 0; i < selectObj.length; i++) {
        if (selectObj.options[i].value == defvalue) {
            selectObj.options[i].selected = true;
            return;
        }
    }
}


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;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)' onMouseOut=\"calendarState.innerHTML=statStr\">&lt;&lt;</span> <span style=\"cursor:hand\" onclick=\"selectCalendar('month',-1)\" onMouseOut=\"calendarState.innerHTML=statStr\">&lt;</span>";
cStr += "&nbsp;<select name=\"calendarYear\" onChange=\"setCalendarvalue()\"></select><select name=\"calendarMonth\" onChange=\"setCalendarvalue()\"></select>&nbsp;";
cStr += "<span style=\"cursor:hand\" onclick=\"selectCalendar('month',1)\" onMouseOut=\"calendarState.innerHTML=statStr\">&gt;</span> <span style=\"cursor:hand\" onclick=\"selectCalendar('year',1)\" onMouseOut=\"calendarState.innerHTML=statStr\">&gt;&gt;</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\" 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);

  • 大小: 12.8 KB
分享到:
评论

相关推荐

    JS日历控件(可以选择多个日期)

    总结来说,创建一个JS日历控件并支持选择多个日期,需要对JavaScript的DOM操作、事件处理、日期对象有深入的理解,以及一定的前端设计和用户体验知识。实践中,我们可以结合现有的库和框架来简化开发流程,提高效率...

    JS弹出可供选择日期的日历

    通过以上步骤,我们可以创建一个基本的JavaScript日期选择器。尽管这里只提供了核心概念,但实际实现可能需要更多细节和代码。你可以根据项目需求进行扩展和定制,打造一个功能强大且用户友好的日期选择组件。

    基于js的日期选择日历控件

    "基于js的日期选择日历控件"是指使用JavaScript编程语言创建的交互式日历组件。JavaScript作为客户端脚本语言,可以在用户的浏览器上运行,提供实时的动态效果和用户交互。这种控件的一个关键特性是其灵活性,开发者...

    JS日历插件日期选择器

    JavaScript(简称JS)日历插件是一种常用的前端交互组件,用于在网页上提供直观的日期选择功能。在网页设计和开发中,日期选择器通常用于处理与日期相关的表单输入,如预订系统、事件安排或者在线调查等。下面将详细...

    jQuery日期日历选择器插件自定义多种日期选择

    在IT领域,前端开发中经常会使用到各种各样的插件来增强用户体验,特别是涉及到日期选择时,jQuery日期日历选择器插件就是一种常见的解决方案。本文将深入探讨jQuery日期日历选择器插件的自定义功能及其应用。 首先...

    calendar手机选择日期日历插件.zip

    "calendar手机选择日期日历插件.zip" 是一个专为手机设计的日历模板,它提供了用户友好的界面,使得用户能够方便地在应用中选择日期。下面将详细探讨这个日历插件相关的知识点。 1. **日历插件的基本功能**: - **...

    js简洁日历-日期选择-万年历

    "js简洁日历-日期选择-万年历"项目就是一个利用JavaScript实现的轻量级日历组件,它提供了用户友好的日期选择功能,适用于各种需要日期输入的场景。 这个日历组件的亮点在于其简洁性,意味着它可能具有高效的代码...

    Kalendae.js日历控件可多选日期时间代码

    1. **多选模式**:Kalendae.js的一大亮点就是支持多选日期,用户可以同时选择多个日期,这对于需要处理一系列日期的场景非常有用,例如行程安排或者活动规划。 2. **时间选择**:除了基本的日期选择,Kalendae.js还...

    JS 日历组件(功能很强) javascript 日历控件 日历选择空间 日期选择 强烈推荐

    JavaScript日历组件是Web开发中常见的一种交互元素,主要用于用户在网页上进行日期选择操作。在前端开发领域,尤其在构建交互式用户界面时,一个功能强大的日历组件显得尤为重要。"My97DatePicker"是一个知名的...

    js日历控件日期多选Kalendajs

    在这个场景中,"js日历控件日期多选Kalendajs" 提供了一种功能强大的解决方案,允许用户在日历上选择多个日期,甚至可以跨越多个月份。 Kalendajs是一款专门设计的日历插件,它具有日期多选功能,可以极大地提升...

    jQuery手机选择日期日历插件.zip

    "jQuery手机选择日期日历插件.zip" 提供了一个高效的解决方案,它是一个专为手机端设计的jQuery日历插件,利用calendar.js库实现响应式布局,使用户能够方便地选择年、月、日和星期。这个插件简化了开发人员的工作,...

    js 日历 js日历 例子 javascript日历

    JavaScript日历是一个常见的网页交互元素,它为用户提供了一个方便的方式来选择日期,常见于表单填写、事件安排等场景。在Web开发中,JavaScript日历组件的实现主要依赖于JavaScript语言和CSS来完成页面布局和样式...

    js日历代码,选择日期和时间代码

    在JavaScript编程中,创建一个日历控件以供用户选择日期和时间是一项常见的任务,尤其在构建网页交互界面时。本篇文章将详细讲解如何利用JavaScript实现一个简单的日历选择器,并涉及日期和时间处理的基本概念。 ...

    日历js,很容易就能选择日期,选择日期很方便

    标签"日历js,日期js"则暗示了这个资源与日期选择和日历显示相关的JavaScript技术。日期JS通常指的是处理日期和时间的JavaScript函数和对象,如`Date`对象,它提供了创建、比较和操作日期的方法。结合日历JS,我们...

    实用可拖动的日历js+css代码(选择日期用的)

    总结来说,这个“实用可拖动的日历js+css代码”是一个结合了JavaScript动态功能和CSS美化效果的日期选择工具,它提升了用户在网页上的日期操作体验,同时也展示了前端开发中JavaScript和CSS的巧妙运用。如果你正在...

    jQuery手机端HTML5带农历日期选择插件jQuery移动端日历插件swiper.js

    js目录则包含了JavaScript源代码,包括jQuery、swiper.js以及自定义的日历插件逻辑。 总的来说,这款jQuery手机端HTML5日历插件充分利用了现有的前端技术,为移动应用开发提供了一个功能齐全、用户体验良好的日期...

    日历插件calendar.js

    本文将深入探讨名为"calendar.js"的JavaScript日历插件,它允许用户轻松地设置开始日期和结束日期,并提供了丰富的回调和事件设置功能,使得在手机页面上的应用更加便捷。 首先,让我们理解什么是calendar.js。...

    js日期日历控件

    JavaScript日期日历控件是一种常见的前端开发工具,用于在网页上提供用户友好的日期选择功能。这类控件通常由JavaScript代码实现,可以是独立的库或者框架的一部分,如jQuery UI、Bootstrap Datepicker等。在网页...

Global site tag (gtag.js) - Google Analytics