定制版日历可以点击日期获取日期

A small calendar using jQuery. It can show the month you gave, show the active dates you set, get the month users selected, get the date users selected.

var huicalendar = function(element, options){
    this.element = element;
    this.enabledDay = options.enabledDay;
    this.viewDay = options.viewDay || new Date();
    this.year = this.viewDay.getFullYear();
    this.month = this.viewDay.getMonth();
    this.monthArr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二'];
    this.getCalendar();
    this.bindEvent();
}
huicalendar.prototype = {
    getCalendar: function(){
        var that = this;

        var isLeapYear = (((this.year % 4 === 0) && (this.year % 100 !== 0)) || (this.year % 400 === 0));   
        var daysInMonth = [31, (isLeapYear ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][this.month]

        var dateFirst = new Date(this.year+'/'+(this.month+1)+'/'+1);
        var dateLast = new Date(this.year+'/'+(this.month+1)+'/'+daysInMonth);
        var dayFirst = dateFirst.getDay();
        var dayLast = dateLast.getDay();

        var calendar = [];
        for (var i = dayFirst-1; i >= 0; i--) {
            calendar.push('');
        };
        for (var i = 1; i <= daysInMonth; i++) {
            calendar.push(i);
        };
        for (var i = dayLast+1; i < 7; i++) {
            calendar.push('');
        };

        var tbody = '';
        for (var i = 0; i < calendar.length; i++) {
            if(i%7 == 0){
                tbody += '<tr> <td class="'+( ($.inArray(calendar[i], this.enabledDay) == -1)? '':'enabled' )+'">'+calendar[i]+'</td>';
            } else if(i%7 == 6){
                tbody += '<td class="'+( ($.inArray(calendar[i], this.enabledDay) == -1)? '':'enabled' )+'">'+calendar[i]+'</td> </tr>';
            } else {
                tbody += '<td class="'+( ($.inArray(calendar[i], this.enabledDay) == -1)? '':'enabled' )+'">'+calendar[i]+'</td>';
            }
        };

        var monthTab = '<ul>';
        for (var i = 0; i < this.monthArr.length; i++) {
            monthTab += '<li value="'+i+'" class="'+(i==1? 'border-top1':'')+'">'+this.monthArr[i]+'</li>';
        };
        monthTab += '</ul>';

        var thead = 
        '<thead>'+
            '<tr>'+
                '<th><span class="left"></span></th>'+
                '<th colspan="2" class="month" month="'+(this.month+1)+'">'+this.monthArr[this.month]+monthTab+'</th>'+
                '<th colspan="3" class="year" year="'+this.year+'">'+this.year+'年</th>'+
                '<th><span class="right"></span></th>'+
            '</tr>'+
            '<tr class="week">'+
                '<th>日</th>'+
                '<th>一</th>'+
                '<th>二</th>'+
                '<th>三</th>'+
                '<th>四</th>'+
                '<th>五</th>'+
                '<th>六</th>'+
            '</tr>'+
        '</thead>';
        var table = '<table class="huicalendar huicalendar1 huicalendar2" cellspacing="0">'+thead+'<tbody>'+tbody+'</tbody></table>';
        this.element.html(table);
    },
    bindEvent: function(){
        var that = this;
        this.element.on('click', '.left', function(){
            that.month--;
            if(that.month == -1){
                that.month = 11;
                that.year--;
                if(that.year == 1900){
                    that.year++;
                    that.month++;
                }
            }
            that.getCalendar();
            that.element.trigger({
                type: 'changeMonth',
                month: parseInt(that.month)+1,
                year: parseInt(that.year)
            })
        })
        this.element.on('click', '.right', function(){
            that.month++;
            if(that.month == 12){
                that.month = 0;
                that.year++;
            }
            that.getCalendar();
            that.element.trigger({
                type: 'changeMonth',
                month: parseInt(that.month)+1,
                year: parseInt(that.year)
            })
        })
        this.element.on('click', '.month', function(){
            $(this).find('ul').toggle();
            // $(this).toggleClass('show');
        })
        this.element.on('click', '.month li', function(){
            var value = $(this).attr('value');
            that.month = value;
            that.getCalendar();
            that.element.trigger({
                type: 'changeMonth',
                month: parseInt(that.month)+1,
                year: parseInt(that.year)
            })
        })
        this.element.on('click', '.enabled', function(){
            that.element.trigger({
                type: 'changeDate',
                date: $(this).html(),
                month: parseInt(that.month)+1,
                year: parseInt(that.year)
            })
        })
    }

}
$.fn.huicalendar = function(options, operate){
    if(operate == 'update'){
        var hui = $(this).data('huicalendar');
        hui.enabledDay = options.enabledDay;
        hui.viewDay = options.viewDay || new Date();
        hui.year = hui.viewDay.getFullYear();
        hui.month = hui.viewDay.getMonth();
        hui.getCalendar();
    } else {
        var hui = new huicalendar(this, options);
        $(this).data('huicalendar', hui);
    }
    
    return this;
}

.huicalendar.huicalendar1.huicalendar2 {
	width: 180px;
	padding: 2px;
	border: 1px solid #ccc;
	background: #fff;
}
.huicalendar.huicalendar1.huicalendar2 th, .huicalendar.huicalendar1.huicalendar2 td {
	color: #666;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	line-height: 18px;
	height: 18px;
}

.huicalendar.huicalendar1.huicalendar2 td {
	color: #ccc;
	cursor: auto;
}
.huicalendar.huicalendar1.huicalendar2 td:hover {
	background: #fff;
}
.huicalendar.huicalendar1.huicalendar2 td.enabled {
	color: #666;
	cursor: pointer;
}
.huicalendar.huicalendar1.huicalendar2 td.enabled:hover {
	background: #e8ecef;
}
.huicalendar.huicalendar1.huicalendar2 .left {
	display: inline-block;
	width: 16px;
	height: 16px;
	cursor: pointer;
	background: url('../images/img.gif') -16px 0 no-repeat;
}
.huicalendar.huicalendar1.huicalendar2 .right {
	display: inline-block;
	width: 16px;
	height: 16px;
	cursor: pointer;
	background: url('../images/img.gif') -32px 0 no-repeat;
}
.huicalendar.huicalendar1.huicalendar2 thead tr th {
	background: #fff;
}
.huicalendar.huicalendar1.huicalendar2 .week th {
	background: #e8ecef;
}
.huicalendar.huicalendar1.huicalendar2 .month {
	position: relative;
	cursor: pointer;
}
.huicalendar.huicalendar1.huicalendar2 .month.show {

}
.huicalendar.huicalendar1.huicalendar2 .month ul {
	display: none;
	position: absolute;
	top: 16px;
	left: -1px;
	width: 200%;
	margin: 0;
	padding: 0;
	border: 1px solid #ccc;
	background: #fff;
}
.huicalendar.huicalendar1.huicalendar2 .month li {
	float: left;
	width: 50%;
	list-style: none;
	cursor: pointer;
}
.huicalendar.huicalendar1.huicalendar2 .month li:hover {
	background: #e8ecef;
}
.huicalendar.huicalendar1.huicalendar2 .border-top {
	border-top: 1px solid #ccc;
}

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<script src="jquery.js"></script>

	<link rel="stylesheet" href="huicalendar/css/huicalendar.css">
	<script src="huicalendar/js/huicalendar.js"></script>
</head>
<body>
	<div class="test">
		<!-- <table class="huicalendar" cellspacing="0">
			<thead>
				<tr>
					<th><span class="left"></span></th>
					<th colspan="2" class="month">八月
						<ul><li>一月</li><li>一月</li></ul>
					</th>
					<th colspan="3" class="year">2016年</th>
					<th><span class="right"></span></th>
				</tr>
				<tr class="week">
					<th>日</th>
					<th>一</th>
					<th>二</th>
					<th>三</th>
					<th>四</th>
					<th>五</th>
					<th>六</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>31</td>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
				<tr>
					<td>7</td>
					<td class="enabled">8</td>
					<td class="enabled">9</td>
					<td class="enabled">10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
				</tr>
			</tbody>
		</table> -->
	</div>

	<script>
		$('.test').huicalendar({
			enabledDay: [1,2,3],
			viewDay: new Date('2016/08/01')
		}).on('changeMonth', function(e){
			console.log(e.year)
			console.log(e.month)
			$(this).huicalendar({
				enabledDay: [4,5,6],
				viewDay: new Date(e.year+'/'+e.month+'/01')
			}, 'update')
		}).on('changeDate', function(e){
			console.log(e.year)
			console.log(e.month)
			console.log(e.date)
		})


	</script>
</body>
</html>