Jquery calendar control implementation method sharing _ jquery

This article mainly introduces the jquery calendar control implementation method. There are many such plug-ins on the Internet. Below is a self-implemented method, if you need a css style, you can comment out the default css style. You can change it to your own style to implement another style.

The Code is as follows:

/**
* 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 + ='

Day

';
CalendarDiv + ='

I

';
CalendarDiv + ='

II

';
CalendarDiv + ='

3.

';
CalendarDiv + ='

Thu

';
CalendarDiv + ='

V.

';
CalendarDiv + ='

Sat.

';
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 )){
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;
Certificate ('{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 + ='

'+ ''+'

';
};
(('.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 );

/*

*/