首页 > 网站开发 > js日历控件 [支持多天选择, 支持多月显示, 可设置选择区间, 可设置多个不可选择区间]

js日历控件 [支持多天选择, 支持多月显示, 可设置选择区间, 可设置多个不可选择区间]

最后更新: 2015-07-03    浏览次数:     

查看预览

截图:

js日历控件 [支持多天选择, 支持多月显示, 可设置选择区间, 可设置多个不可选择区间] - diê-biāng - 1

日历控件, 支持多天选择, 支持多月显示, 可设置选择区间, 可设置多个不可以选择区间, 可设置多个不可操作的日期

源码下载:

rili.zip
 

 

部分源码:
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>日历控件,日历控件, 支持多天选择, 支持多月显示, 可设置选择区间, 可设置多个不可以选择区间, 可设置多个不可操作的日期</title>
<meta name="description" content="日历控件, 支持多天选择, 支持多月显示, 可设置选择区间, 可设置多个不可以选择区间, 可设置多个不可操作的日期">
<meta name="keywords" content="js日历控件, js, jquery, 支持多天选择, 支持多月显示, 可设置选择区间, 可设置多个不可以选择区间, 可设置多个不可操作的日期">
 
    <script language="JavaScript" type="text/javascript" src="jquery.js"></script>
    <script language="JavaScript" type="text/javascript" src="jquery.animate.clip.js"></script>
    <script language="JavaScript" type="text/javascript" src="jCal.js"></script>
 
    <link rel="stylesheet" type="text/css" href="jCal.css">
 
    <script>
     
        var yiyuding = new Array("07/13/2015","07/17/2015","07/21/2015","08/02/2015","08/11/2015","08/13/2015");    //设置多个不可操作的日期
        var jintian = new  Date();
        var jin =  (jintian.getMonth()+1)+ "/" + jintian.getDate() + "/" + jintian.getFullYear();   //当天日期
         
        $(document).ready(function () {
            $('#calOne').jCal({
                day:            new Date(),
                days:           2,      //默认选择天数
                showMonths:     3,      //显示月数
                monthSelect:    true,
                drawBack:       function () {
                        return false;
                    },
                dCheck:         function (day) {
                        //alert(day);  
                        //alert( day.getTime() );
                        var x;
                        for (x in yiyuding) //设置不可操作的日期
                        {   
                            if( day.getTime() == (new Date(yiyuding[x])).getTime() )
                            return 'invday';
                        }
                         
                        if ( day.getTime() < (new Date(jin)).getTime() ) //设置之前日期不可操作
                        {
                            return 'invday';
                        }
                        else
                            return 'day';
                    },
                callback:       function (day, days) {
                //选择之后
                //day   //开始日期
                //days  //选择天数
                        $('#calOneDays').val( days );
                        $(this._target).find('.dInfo').remove();
                        var dCursor = new Date( day.getTime() );
                        for (var di=0; di < days; di++) {
                            var currDay = $(this._target).find('[id*=d_' + ( dCursor.getMonth() + 1 ) + '_' + dCursor.getDate() + '_' + dCursor.getFullYear() + ']');
                            if (currDay.length) currDay.append('<div class="dInfo"><span style="color:red">么么</span></div>');
                            dCursor.setDate( dCursor.getDate() + 1 );
                        }
                        // if calling the function on already selected day(s)
                        if ( typeof $(this._target).data('day') == 'object' &&
                             $(this._target).data('day').getTime() == day.getTime() &&
                             $(this._target).data('days') == days ) {
                            $('#calOneResult').append('<div style="clear:both; font-size:7pt;">选了' + days + ' 天,  开始日期:  ' +
                                ( day.getMonth() + 1 ) + '/' + day.getDate() + '/' + day.getFullYear() + ' 翻页操作</div>');
                        } else {
                            $('#calOneResult').append('<div style="clear:both; font-size:7pt;">选了' + days + ' 天,  开始日期:  ' +
                                ( day.getMonth() + 1 ) + '/' + day.getDate() + '/' + day.getFullYear() + '</div>');
                        }
                        return true;
                    }
                });
     
        });
    </script>
 
    <style>
        .dInfo {
            font-family:tahoma;
            font-size:7pt;
            color:#fff;
            padding-top:1px;
            padding-bottom:1px;
            background:rgb(0, 102, 153);
        }
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
</style>
 
</head>
<body>
 
<table>
    <tr>
        <td align=left valign=top style="padding:10px; background:#E3E3E3;">
            <p><a href="http://www.overset.com/2008/05/12/multiday-calendar-datepicker-jquery-plugin/" target="_blank">原控件官方地址</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://blog.diebiang.com/#rili" target="_blank">中文说明地址</a></p>
            <p>引入这3个js文件: jquery.js, jquery.animate.clip.js, jCal.js</p>
            <p>和一个css文件即可: jCal.css, 样式自行美化</p>
        </td>
     
    </tr>
     
 
 
    <tr>
        <td align=left valign=top style="padding:10px; background:#E3E3E3;">
            <strong>选择天数:</strong>
            <select id="calOneDays" onChange="$('#calOne').data('days', $('#calOneDays').val());">
                <option value="1">1</option><option value="2" SELECTED>2</option><option value="3">3</option>
                <option value="4">4</option><option value="5">5</option><option value="6">6</option>
                <option value="7">7</option><option value="8">8</option><option value="9">9</option>
                <option value="10">10</option><option value="11">11</option><option value="12">12</option>
            </select>
        </td>
     
    </tr>
    <tr>
        <td align=left id="calOne" valign=top style="padding:10px; background:#E3E3E3;">
            导入日历中...
        </td>
         
    </tr>
    <tr>
        <td align=left id="calOneResult" valign=top style="padding:10px; background:#E3E3E3;"></td>
         
    </tr>
</table>
 
 
 
</body>
</html>