jquery calendar日历代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery calendar日历插件</title>
</head>
<body>
<style type="text/css">
		#calendar{width:200px;height:30px;background:#fff;}
		.calpos{width:0;height:0;overflow: hidden;}
		.calbox{width:210px;border:#333 1px solid;background:#fff;}
		.weklist{width:210px;padding:0;margin:0;}
		.weklist li{float:left;list-style: none;width:30px;height:30px;line-height: 30px;text-align:center;padding:0;margin:0;background:red;}
		.caltable{width:210px;clear:both;border:0;}
		.caltable tr td{width:30px;height:30px;text-align:center;}
		.caltable tr td a{background:#0000FF;cursor:pointer;display:block;line-height:30px;}
		.caltable tr td a.current{background:yellow;}
		.caltable tr td a:hover{background:red;}
		</style>
		<input id="calendar" type="text" value="">
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
/**
 * @author delong
 * @param monthNames 
 * @param dayNames
 * @param wekdaystart  从周几开始 
 * @param today  [2013,2,1] 月份减一
 * @param language  
 * @param $(input).calendar();
 */
(function($) {
    $.fn.calendar = function(options) {
        var defaults = {
            monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            dayNames: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
            wekdaystart: 1,
            today: '', //[2013,2,1]
            language: 'en_US'
        }
        var opts = $.extend(defaults, options);
		if(opts.language == 'en_US'){opts.wekdaystart=0;}
        if (opts.today == '') {
            var td = new Date();
            opts.today = [td.getFullYear(), td.getMonth(), td.getDate()];
        }
        var $this = $(this);
        function creatbox() {
            var Mselect = "<select name='Mselect'>";
            for (var i = 0; i < 12; i++) {
                Mselect = Mselect + "<option value=" + i + ">" + opts.monthNames[i] + "</option>";
            }
            Mselect += "</select>";
            var Yselect = "<select name='Yselect'>";
            for (var i = 2013; i < 2024; i++) {
                Yselect = Yselect + "<option value=" + i + ">" + i + "</option>";
            }
            Yselect += "</select>";
            var Wekdaylist = "<ul class='weklist'>";
            for (var i = 0; i < 7; i++) {
                var listorder = opts.wekdaystart + i;
                if (listorder > 6) {
                    listorder -= 7;
                }
                Wekdaylist = Wekdaylist + "<li>" + opts.dayNames[listorder] + '</li>'
            }
            Wekdaylist += "</ul>";
            var html = "<div class='calpos'><div class='calbox'>" + language() + Wekdaylist + "<table class='caltable'></table></div></div>";
            $this.after(html);
            function language() {
                if (opts.language == 'en_US') {
                    return Mselect + Yselect;
                } else {
                    return Yselect + '年' + Mselect;
                }
            }
        };
        function creatDate(Y, M) {
            var daycount = [31, (C(Y) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
            var d = new Date(Y, M, 1);
            var weday = d.getDay();
            var differday;
            var daystart = opts.wekdaystart;
            for (var i = 0; i < 7; i++) {
                if (daystart == 7) {
                    daystart = 0;
                }
                if (daystart == weday) {
                    differday = i;
                }
                daystart++;
            }
            var daynum = differday + daycount[M];
            var daylastnum = 28;
            if (daynum > 28 && daynum <= 35) {
                daylastnum = 35;
            }
            if (daynum > 35 && daynum <= 42) {
                daylastnum = 42;
            }
            var tbody = '<tr>'
            var today = istoday(Y, M);
            if (today) {
                var addday = function(i) {
                    if (today + differday == i) {
                        tbody = tbody + "<td><a class='current'>" + (i - differday) + "</a></td>";
                    } else {
                        tbody = tbody + "<td><a>" + (i - differday) + "</a></td>";
                    }
                };
            } else {
                var addday = function(i) {
                    tbody = tbody + "<td><a>" + (i - differday) + "</a></td>";
                };
            }
            for (var i = 1; i <= daylastnum; i++) {
                if (i>1&&(i - 1) % 7 == 0) {
                    tbody += "<tr>";
                }
                if (i > differday && i <= daynum) {
                    addday(i)
                } else {
                    tbody = tbody + "<td></td>";
                }
                if (i % 7 == 0) {
                    tbody += "</tr>";
                }
            }
            $this.next('.calpos').find('.caltable').html(tbody);
            function C(y) {
                if (y % 4 == 0) {
                    return true;
                }
            };
            function istoday(Y, M) {
                if (opts.today[0] == Y && opts.today[1] == M) {
                    return opts.today[2];
                } else {
                    return false;
                };
            }
        }
        function show() {
            var calbox = $this.next('.calpos')[0].firstChild;
            var width = calbox.offsetWidth + 'px';
            var height = calbox.offsetHeight + 'px';
            $this.next('.calpos').animate({
                'width': width,
                height: height
            },
            500);
        }
        function position() {
            var top = $this.height() + 'px';
            $this.parent().css('position', 'relative');
            $this.next('.calpos').css({
                'position': 'absolute',
                left: 0,
                top: top
            });
        }
        function changeMonth() {
            var M = $this.next('.calpos').find('select:[name="Mselect"]');
            M[0].value = opts.today[1];
            var Y = $this.next('.calpos').find('select:[name="Yselect"]');
            Y[0].value = opts.today[0];
        }
        function changeDate() {
            var M = $this.next('.calpos').find('select:[name="Mselect"]').val();
            var Y = $this.next('.calpos').find('select:[name="Yselect"]').val();
            creatDate(Y, M);
        }
        function init() {
            var calbox = $this.next('.calpos');
            if (calbox.length == 1) {
                show();
            } else {
                creatbox();
                creatDate(opts.today[0], opts.today[1]);
                show();
                changeMonth();
                position();
                var Mselect = $this.next('.calpos').find('select:[name="Mselect"]');
                var Yselect = $this.next('.calpos').find('select:[name="Yselect"]');
                Mselect[0].onclick = function(evt) {evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;}
                Yselect[0].onclick = function(evt) {evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;}
                Mselect.change(function() {
                    changeDate();
                });
                Yselect.change(function() {
                    changeDate();
                });
                $this.next('.calpos').find('table').delegate('td a', 'click',
                function() {
                    var val = Yselect.val() + '-' + (parseInt(Mselect.val()) + 1) + '-' + $(this).html();
                    $this.val(val);
                });
            }
        };
        function hide(){
        	$this.next('.calpos').css({
                width: 0,
                height: 0
            });
        }
        $this.click(function(evt) {
        	evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;
            init();
        });
        document.onclick=function(){hide();};
    };
})(jQuery);
</script>
<script type="text/javascript">
$('#calendar').calendar();
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jquery calendar日历代码

分类

日期时间

描述

基于jquery的 calendar日历插件，单击文本框即可弹出日期选择功能，没有怎么美化，显得很粗糙的效果，不过细心的朋友自己拿去二次开发啦，jQuery可以引用官方的最新版。