jquery日历控件实现方法分享
本文导语: 注释掉的是默认的css样式,你可以修改成自己的样式实现另一个风格,大家参考使用吧 代码如下:/** * jQuery Calendar Plugin */(function($, window) { 'use strict'; $.fn.calendar = function(options) { //check is select, if nothing select...
注释掉的是默认的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 = '
calendarDiv += '
calendarDiv += '
calendarDiv += '-
calendarDiv += '
calendarDiv += '
calendarDiv += '
calendarDiv += '
calendarDiv += '
calendarDiv += '
calendarDiv += '
calendarDiv += '
calendarDiv += '
calendarDiv += '
for (var k = 0; k < 35; k++) {
calendarDiv += '
}
calendarDiv += '
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 ? 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