這篇文章主要介紹了jquery日歷控件實現方法，網上有好多這樣的插件，下面是自己實現的一個方法,需要的朋友可以參考下
注釋掉的是默認的css樣式，你可以修改成自己的樣式實現另一個風格，大家參考使用吧 代碼如下: /** * jQuery Calendar Plugin */ (function($, window) { 'use strict'; $.fn.calendar = function(options) { //check is select, if nothing select, return this if (!this.length) { if (options && options.debug && window.console) { console.log("nothing select"); } return this; } var self = $(this); // default parameter setting var defaults = { cssPath: '', //user-define loading path of css file eventName: 'click', //user-define the event name that triggers the control onSelectDate: null, //callback function after select date autoClose: false }; //inherit user-defined parameter defaults = $.extend(defaults, options); //default as data of the day var d_date = new Date(); var _date = { year: d_date.getFullYear(), month: d_date.getMonth() + 1, day: d_date.getDate(), week: d_date.getDay() }; //default template of plugin var calendarDiv = '<div id="calendar" class="cld_grid" style="display:none;z-index:100;">'; calendarDiv += '<div id="calendar_year_month" class="cld_year_month" style="position:relative;">'; calendarDiv += '<div id="last-year" style="position:absolute;left:30px;"><</div>'; calendarDiv += '<div id="last-month" style="position:absolute;left:60px;"><<</div>'; calendarDiv += '<div id="next-year" style="position:absolute;right:30px;">></div>'; calendarDiv += '<div id="next-month" style="position:absolute;right:60px;">>></div>'; calendarDiv += '<input style="width:40px;text-align:center;" type="text" id="calendar_year" value="' + _date.year + '">-<input style="width:25px;text-align:center;" type="text" id="calendar_month" value="' + _date.month + '"></div>' calendarDiv += '<div id="calendar_week_box" class="cld_week_box clearfix">'; calendarDiv += '<div class="header-day" data-index = "0">日</div>'; calendarDiv += '<div class="header-day" data-index = "1">一</div>'; calendarDiv += '<div class="header-day" data-index = "2">二</div>'; calendarDiv += '<div class="header-day" data-index = "3">三</div>'; calendarDiv += '<div class="header-day" data-index = "4">四</div>'; calendarDiv += '<div class="header-day" data-index = "5">五</div>'; calendarDiv += '<div class="header-day" data-index = "6">六</div>'; calendarDiv += '</div>'; calendarDiv += '<div class="days clearfix">'; for (var k = 0; k < 35; k++) { calendarDiv += '<div class="day"><span class="day-number">' + '' + '</span></div>'; } calendarDiv += '</div></div>'; var calendarAction = { //initialization initAction: function() { calendarAction.thisClick(); calendarAction.inputChange(); calendarAction.buttonChange(); calendarAction.chooseDate(); }, //click to display thisClick: function() { self.bind(defaults.eventName, function(e) { calendarAction.showCalendar(); }); }, //when year and month in the input box changes inputChange: function() { $('#calendar_year, #calendar_month').bind('change', function() { var year = $('#calendar_year').val(), month = $('#calendar_month').val(); if (!/^d{4}$/.test(year)) { alert('please input four-digit year'); return false; } if (!/^d{1,2}$/.test(month) || (month > 12 || month <= 0)) { alert('please input proper month'); return false; } //Initialize after year and month changes init_day_numbers(year, month); }); }, //click to change year and month buttonChange: function() { $('#last-year').bind('click', function() { var lastYear = parseInt($('#calendar_year').val()) - 1 > 0 ? parseInt($('#calendar_year').val()) - 1 : 1; $('#calendar_year').val(lastYear); init_day_numbers(lastYear, $('#calendar_month').val()); }); $('#last-month').bind('click', function() { var lastMonth = parseInt($('#calendar_month').val()) - 1 > 0 ? parseInt($('#calendar_month').val()) - 1 : 12, thisYear = lastMonth == 12 ? parseInt($('#calendar_year').val()) - 1 : $('#calendar_year').val(); $('#calendar_month').val(lastMonth); $('#calendar_year').val(thisYear); init_day_numbers(thisYear, lastMonth); }); $('#next-year').bind('click', function() { var nextYear = parseInt($('#calendar_year').val()) + 1; $('#calendar_year').val(nextYear); init_day_numbers(nextYear, $('#calendar_month').val()); }); $('#next-month').bind('click', function() { var nextMonth = parseInt($('#calendar_month').val()) + 1 <= 12 ? parseInt($('#calendar_month').val()) + 1 : 1, thisYear = nextMonth == 1 ? parseInt($('#calendar_year').val()) + 1 : $('#calendar_year').val(); $('#calendar_month').val(nextMonth); $('#calendar_year').val(thisYear); init_day_numbers(thisYear, nextMonth); }); }, //set the relative offset between control and webpage, then display showCalendar: function() { var o_x = self.offset().left, o_y = self.offset().top + self[0].offsetHeight; $('#calendar').css({ 'position': 'absolute', 'left': o_x, 'top': o_y, 'display': 'block' }); }, //close plugin closeCalendar: function() { $('#calendar').hide(); }, //select date chooseDate: function() { $('.day').live('click', function() { var _date = $(this).attr('data-date'); //trigger callback function if ($.isFunction(defaults.onSelectDate)) { defaults.onSelectDate.call(this, _date); } if (defaults.autoClose) { calendarAction.closeCalendar(); } }); } }; //write calendar template in webpage $('body').append(calendarDiv); //initialize the year, month, day of calendar list init_day_numbers(_date.year, _date.month); //initialize plugin action calendarAction.initAction(); function init_day_numbers(year, month) { var maxday = getmaxDay(year, month), firstWeek,beforeNumber, startIndex = beforeNumber = firstWeek = getFirstWeek(year, month), afterNumber = 35 - maxday - beforeNumber, lastMonthMaxDay = getMaxDayByLastMonth(year, month), nextMonthMaxDay = getMaxDayByNextMonth(year, month), Edge = getLastAndNextDate(year, month); var default_html = ''; for (var k = 0; k < 35; k++) { default_html += '<div class="day"><span class="day-number">' + '' + '</span></div>'; }; $('.days').html(default_html); for (var s = 1; s <= maxday; s++) { $('.day-number').eq(startIndex).text(s); $('.day').eq(startIndex).attr('data-date', year + '-' + month + '-' + s); if (s == _date.day && year == _date.year && month == _date.month) { $('.day').eq(startIndex).addClass('today'); } startIndex++; }; for (var k = 0; k < beforeNumber; k++) { var realDay = lastMonthMaxDay - beforeNumber + k + 1; $('.day-number').eq(k).text(realDay); $('.day-number').eq(k).addClass('last-month'); $('.day').eq(k).attr('data-date', Edge.lastY + '-' + Edge.lastM + '-' + realDay); }; for (var l = 1; l <= afterNumber; l++) { var _index = beforeNumber + maxday + (l - 1); $('.day-number').eq(_index).text(l); $('.day-number').eq(_index).addClass('next-month'); $('.day').eq(_index).attr('data-date', Edge.nextY + '-' + Edge.nextM + '-' + l); } } function getLastAndNextDate(year, month) { var lastM = month - 1 > 0 ? month - 1 : 12, lastY = lastM == 12 ? year - 1 : year, nextM = month + 1 > 12 ? 1 : month + 1, nextY = nextM == 1 ? year + 1 : year; return { lastM: lastM, lastY: lastY, nextM: nextM, nextY: nextY }; } //obtain what the first day of one month is in a week function getFirstWeek(year, month) { var date = new Date(year, month - 1, 1); return date.getDay(); } //obtain the year, month, day of today function getToday() { var date = new Date(); return today = [date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getDay()]; } //obtain the number of days for a month function getmaxDay(year, month) { var date = new Date(year, month, 0); return date.getDate(); } //obtain the number of days for last month function getMaxDayByLastMonth(year, month) { month = month - 1 <= 0 ? 12 : month - 1; year = month == 12 ? year - 1 : year; return getmaxDay(year, month); } //obtain the number of days for next month function getMaxDayByNextMonth(year, month) { month = month + 1 > 12 ? 1 : month + 1; year = month == 1 ? year + 1 : year; return getmaxDay(year, month); } //obtain the days list of a certain year and month, return array function getDayList(year, month) { var _list = [], maxday = getmaxDay(year, month), month = month - 1; for (var i = 1; i <= maxday; i++) { var d = new Date(year, month, i); _list[i - 1] = d.getDay(); } return _list; } } })(jQuery, window); /* <style type="text/css"> *{margin:0;padding:0;font-size:12px;font-family: Inconsolata, Monaco, 'Andale Mono', Courier;} .cld_grid{width:300px;margin:auto;} .cld_week_box{background-color:#3883a3;width:100%;} .header-day{float: left;padding: 10px 0px;width: 14.2857%;text-align: center;color: white;font-family:'微軟雅黑'} .clearfix:after{content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} .day{float: left; width: 14.2857%; height: 13px; padding: 10px 0; text-align: center; color: #4f4f4f; background-color: #ebebeb; border-bottom: 2px solid white; background-image: url('http://kylestetz.github.io/CLNDR/css/./triangle.svg'); background-size: cover; background-position: center; cursor: pointer; } .days .last-month, .days .next-month { opacity: 0.3; } .days .today{ background:#fff; } .cld_year_month{ padding: 10px; background-color: #71bbd2; text-align: center; color: white; letter-spacing: 1px; font-size:14px; } .cld_year_month div{cursor:pointer;} </style> */