jquery.calendar.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  1. /**
  2. * jQuery EasyUI 1.4.2
  3. *
  4. * Copyright (c) 2009-2015 www.jeasyui.com. All rights reserved.
  5. *
  6. * Licensed under the GPL license: http://www.gnu.org/licenses/gpl.txt
  7. * To use it on other terms please contact us at info@jeasyui.com
  8. *
  9. */
  10. /**
  11. * calendar - jQuery EasyUI
  12. *
  13. */
  14. (function($){
  15. function setSize(target, param){
  16. var opts = $.data(target, 'calendar').options;
  17. var t = $(target);
  18. if (param){
  19. $.extend(opts, {
  20. width: param.width,
  21. height: param.height
  22. });
  23. }
  24. t._size(opts, t.parent());
  25. t.find('.calendar-body')._outerHeight(t.height() - t.find('.calendar-header')._outerHeight());
  26. if (t.find('.calendar-menu').is(':visible')){
  27. showSelectMenus(target);
  28. }
  29. }
  30. function init(target){
  31. $(target).addClass('calendar').html(
  32. '<div class="calendar-header">' +
  33. '<div class="calendar-nav calendar-prevmonth"></div>' +
  34. '<div class="calendar-nav calendar-nextmonth"></div>' +
  35. '<div class="calendar-nav calendar-prevyear"></div>' +
  36. '<div class="calendar-nav calendar-nextyear"></div>' +
  37. '<div class="calendar-title">' +
  38. '<span class="calendar-text"></span>' +
  39. '</div>' +
  40. '</div>' +
  41. '<div class="calendar-body">' +
  42. '<div class="calendar-menu">' +
  43. '<div class="calendar-menu-year-inner">' +
  44. '<span class="calendar-nav calendar-menu-prev"></span>' +
  45. '<span><input class="calendar-menu-year" type="text"></input></span>' +
  46. '<span class="calendar-nav calendar-menu-next"></span>' +
  47. '</div>' +
  48. '<div class="calendar-menu-month-inner">' +
  49. '</div>' +
  50. '</div>' +
  51. '</div>'
  52. );
  53. $(target).bind('_resize', function(e,force){
  54. if ($(this).hasClass('easyui-fluid') || force){
  55. setSize(target);
  56. }
  57. return false;
  58. });
  59. }
  60. function bindEvents(target){
  61. var opts = $.data(target, 'calendar').options;
  62. var menu = $(target).find('.calendar-menu');
  63. menu.find('.calendar-menu-year').unbind('.calendar').bind('keypress.calendar', function(e){
  64. if (e.keyCode == 13){
  65. setDate(true);
  66. }
  67. });
  68. $(target).unbind('.calendar').bind('mouseover.calendar', function(e){
  69. var t = toTarget(e.target);
  70. if (t.hasClass('calendar-nav') || t.hasClass('calendar-text') || (t.hasClass('calendar-day') && !t.hasClass('calendar-disabled'))){
  71. t.addClass('calendar-nav-hover');
  72. }
  73. }).bind('mouseout.calendar', function(e){
  74. var t = toTarget(e.target);
  75. if (t.hasClass('calendar-nav') || t.hasClass('calendar-text') || (t.hasClass('calendar-day') && !t.hasClass('calendar-disabled'))){
  76. t.removeClass('calendar-nav-hover');
  77. }
  78. }).bind('click.calendar', function(e){
  79. var t = toTarget(e.target);
  80. if (t.hasClass('calendar-menu-next') || t.hasClass('calendar-nextyear')){
  81. showYear(1);
  82. } else if (t.hasClass('calendar-menu-prev') || t.hasClass('calendar-prevyear')){
  83. showYear(-1);
  84. } else if (t.hasClass('calendar-menu-month')){
  85. menu.find('.calendar-selected').removeClass('calendar-selected');
  86. t.addClass('calendar-selected');
  87. setDate(true);
  88. } else if (t.hasClass('calendar-prevmonth')){
  89. showMonth(-1);
  90. } else if (t.hasClass('calendar-nextmonth')){
  91. showMonth(1);
  92. } else if (t.hasClass('calendar-text')){
  93. if (menu.is(':visible')){
  94. menu.hide();
  95. } else {
  96. showSelectMenus(target);
  97. }
  98. } else if (t.hasClass('calendar-day')){
  99. if (t.hasClass('calendar-disabled')){return}
  100. var oldValue = opts.current;
  101. t.closest('div.calendar-body').find('.calendar-selected').removeClass('calendar-selected');
  102. t.addClass('calendar-selected');
  103. var parts = t.attr('abbr').split(',');
  104. var y = parseInt(parts[0]);
  105. var m = parseInt(parts[1]);
  106. var d = parseInt(parts[2]);
  107. opts.current = new Date(y, m-1, d);
  108. opts.onSelect.call(target, opts.current);
  109. if (!oldValue || oldValue.getTime() != opts.current.getTime()){
  110. opts.onChange.call(target, opts.current, oldValue);
  111. }
  112. if (opts.year != y || opts.month != m){
  113. opts.year = y;
  114. opts.month = m;
  115. show(target);
  116. }
  117. }
  118. });
  119. function toTarget(t){
  120. var day = $(t).closest('.calendar-day');
  121. if (day.length){
  122. return day;
  123. } else {
  124. return $(t);
  125. }
  126. }
  127. function setDate(hideMenu){
  128. var menu = $(target).find('.calendar-menu');
  129. var year = menu.find('.calendar-menu-year').val();
  130. var month = menu.find('.calendar-selected').attr('abbr');
  131. if (!isNaN(year)){
  132. opts.year = parseInt(year);
  133. opts.month = parseInt(month);
  134. show(target);
  135. }
  136. if (hideMenu){menu.hide()}
  137. }
  138. function showYear(delta){
  139. opts.year += delta;
  140. show(target);
  141. menu.find('.calendar-menu-year').val(opts.year);
  142. }
  143. function showMonth(delta){
  144. opts.month += delta;
  145. if (opts.month > 12){
  146. opts.year++;
  147. opts.month = 1;
  148. } else if (opts.month < 1){
  149. opts.year--;
  150. opts.month = 12;
  151. }
  152. show(target);
  153. menu.find('td.calendar-selected').removeClass('calendar-selected');
  154. menu.find('td:eq(' + (opts.month-1) + ')').addClass('calendar-selected');
  155. }
  156. }
  157. /**
  158. * show the select menu that can change year or month, if the menu is not be created then create it.
  159. */
  160. function showSelectMenus(target){
  161. var opts = $.data(target, 'calendar').options;
  162. $(target).find('.calendar-menu').show();
  163. if ($(target).find('.calendar-menu-month-inner').is(':empty')){
  164. $(target).find('.calendar-menu-month-inner').empty();
  165. var t = $('<table class="calendar-mtable"></table>').appendTo($(target).find('.calendar-menu-month-inner'));
  166. var idx = 0;
  167. for(var i=0; i<3; i++){
  168. var tr = $('<tr></tr>').appendTo(t);
  169. for(var j=0; j<4; j++){
  170. $('<td class="calendar-nav calendar-menu-month"></td>').html(opts.months[idx++]).attr('abbr',idx).appendTo(tr);
  171. }
  172. }
  173. }
  174. var body = $(target).find('.calendar-body');
  175. var sele = $(target).find('.calendar-menu');
  176. var seleYear = sele.find('.calendar-menu-year-inner');
  177. var seleMonth = sele.find('.calendar-menu-month-inner');
  178. seleYear.find('input').val(opts.year).focus();
  179. seleMonth.find('td.calendar-selected').removeClass('calendar-selected');
  180. seleMonth.find('td:eq('+(opts.month-1)+')').addClass('calendar-selected');
  181. sele._outerWidth(body._outerWidth());
  182. sele._outerHeight(body._outerHeight());
  183. seleMonth._outerHeight(sele.height() - seleYear._outerHeight());
  184. }
  185. /**
  186. * get weeks data.
  187. */
  188. function getWeeks(target, year, month){
  189. var opts = $.data(target, 'calendar').options;
  190. var dates = [];
  191. var lastDay = new Date(year, month, 0).getDate();
  192. for(var i=1; i<=lastDay; i++) dates.push([year,month,i]);
  193. // group date by week
  194. var weeks = [], week = [];
  195. var memoDay = -1;
  196. while(dates.length > 0){
  197. var date = dates.shift();
  198. week.push(date);
  199. var day = new Date(date[0],date[1]-1,date[2]).getDay();
  200. if (memoDay == day){
  201. day = 0;
  202. } else if (day == (opts.firstDay==0 ? 7 : opts.firstDay) - 1){
  203. weeks.push(week);
  204. week = [];
  205. }
  206. memoDay = day;
  207. }
  208. if (week.length){
  209. weeks.push(week);
  210. }
  211. var firstWeek = weeks[0];
  212. if (firstWeek.length < 7){
  213. while(firstWeek.length < 7){
  214. var firstDate = firstWeek[0];
  215. var date = new Date(firstDate[0],firstDate[1]-1,firstDate[2]-1)
  216. firstWeek.unshift([date.getFullYear(), date.getMonth()+1, date.getDate()]);
  217. }
  218. } else {
  219. var firstDate = firstWeek[0];
  220. var week = [];
  221. for(var i=1; i<=7; i++){
  222. var date = new Date(firstDate[0], firstDate[1]-1, firstDate[2]-i);
  223. week.unshift([date.getFullYear(), date.getMonth()+1, date.getDate()]);
  224. }
  225. weeks.unshift(week);
  226. }
  227. var lastWeek = weeks[weeks.length-1];
  228. while(lastWeek.length < 7){
  229. var lastDate = lastWeek[lastWeek.length-1];
  230. var date = new Date(lastDate[0], lastDate[1]-1, lastDate[2]+1);
  231. lastWeek.push([date.getFullYear(), date.getMonth()+1, date.getDate()]);
  232. }
  233. if (weeks.length < 6){
  234. var lastDate = lastWeek[lastWeek.length-1];
  235. var week = [];
  236. for(var i=1; i<=7; i++){
  237. var date = new Date(lastDate[0], lastDate[1]-1, lastDate[2]+i);
  238. week.push([date.getFullYear(), date.getMonth()+1, date.getDate()]);
  239. }
  240. weeks.push(week);
  241. }
  242. return weeks;
  243. }
  244. /**
  245. * show the calendar day.
  246. */
  247. function show(target){
  248. var opts = $.data(target, 'calendar').options;
  249. if (opts.current && !opts.validator.call(target, opts.current)){
  250. opts.current = null;
  251. }
  252. var now = new Date();
  253. var todayInfo = now.getFullYear()+','+(now.getMonth()+1)+','+now.getDate();
  254. var currentInfo = opts.current ? (opts.current.getFullYear()+','+(opts.current.getMonth()+1)+','+opts.current.getDate()) : '';
  255. // calulate the saturday and sunday index
  256. var saIndex = 6 - opts.firstDay;
  257. var suIndex = saIndex + 1;
  258. if (saIndex >= 7) saIndex -= 7;
  259. if (suIndex >= 7) suIndex -= 7;
  260. $(target).find('.calendar-title span').html(opts.months[opts.month-1] + ' ' + opts.year);
  261. var body = $(target).find('div.calendar-body');
  262. body.children('table').remove();
  263. var data = ['<table class="calendar-dtable" cellspacing="0" cellpadding="0" border="0">'];
  264. data.push('<thead><tr>');
  265. for(var i=opts.firstDay; i<opts.weeks.length; i++){
  266. data.push('<th>'+opts.weeks[i]+'</th>');
  267. }
  268. for(var i=0; i<opts.firstDay; i++){
  269. data.push('<th>'+opts.weeks[i]+'</th>');
  270. }
  271. data.push('</tr></thead>');
  272. data.push('<tbody>');
  273. var weeks = getWeeks(target, opts.year, opts.month);
  274. for(var i=0; i<weeks.length; i++){
  275. var week = weeks[i];
  276. var cls = '';
  277. if (i == 0){cls = 'calendar-first';}
  278. else if (i == weeks.length - 1){cls = 'calendar-last';}
  279. data.push('<tr class="' + cls + '">');
  280. for(var j=0; j<week.length; j++){
  281. var day = week[j];
  282. var s = day[0]+','+day[1]+','+day[2];
  283. var dvalue = new Date(day[0], parseInt(day[1])-1, day[2]);
  284. var d = opts.formatter.call(target, dvalue);
  285. var css = opts.styler.call(target, dvalue);
  286. var classValue = '';
  287. var styleValue = '';
  288. if (typeof css == 'string'){
  289. styleValue = css;
  290. } else if (css){
  291. classValue = css['class'] || '';
  292. styleValue = css['style'] || '';
  293. }
  294. var cls = 'calendar-day';
  295. if (!(opts.year == day[0] && opts.month == day[1])){
  296. cls += ' calendar-other-month';
  297. }
  298. if (s == todayInfo){cls += ' calendar-today';}
  299. if (s == currentInfo){cls += ' calendar-selected';}
  300. if (j == saIndex){cls += ' calendar-saturday';}
  301. else if (j == suIndex){cls += ' calendar-sunday';}
  302. if (j == 0){cls += ' calendar-first';}
  303. else if (j == week.length-1){cls += ' calendar-last';}
  304. cls += ' ' + classValue;
  305. if (!opts.validator.call(target, dvalue)){
  306. cls += ' calendar-disabled';
  307. }
  308. data.push('<td class="' + cls + '" abbr="' + s + '" style="' + styleValue + '">' + d + '</td>');
  309. }
  310. data.push('</tr>');
  311. }
  312. data.push('</tbody>');
  313. data.push('</table>');
  314. body.append(data.join(''));
  315. body.children('table.calendar-dtable').prependTo(body);
  316. opts.onNavigate.call(target, opts.year, opts.month);
  317. }
  318. $.fn.calendar = function(options, param){
  319. if (typeof options == 'string'){
  320. return $.fn.calendar.methods[options](this, param);
  321. }
  322. options = options || {};
  323. return this.each(function(){
  324. var state = $.data(this, 'calendar');
  325. if (state){
  326. $.extend(state.options, options);
  327. } else {
  328. state = $.data(this, 'calendar', {
  329. options:$.extend({}, $.fn.calendar.defaults, $.fn.calendar.parseOptions(this), options)
  330. });
  331. init(this);
  332. }
  333. if (state.options.border == false){
  334. $(this).addClass('calendar-noborder');
  335. }
  336. setSize(this);
  337. bindEvents(this);
  338. show(this);
  339. $(this).find('div.calendar-menu').hide(); // hide the calendar menu
  340. });
  341. };
  342. $.fn.calendar.methods = {
  343. options: function(jq){
  344. return $.data(jq[0], 'calendar').options;
  345. },
  346. resize: function(jq, param){
  347. return jq.each(function(){
  348. setSize(this, param);
  349. });
  350. },
  351. moveTo: function(jq, date){
  352. return jq.each(function(){
  353. if (!date){
  354. var now = new Date();
  355. $(this).calendar({
  356. year: now.getFullYear(),
  357. month: now.getMonth()+1,
  358. current: date
  359. });
  360. return;
  361. }
  362. var opts = $(this).calendar('options');
  363. if (opts.validator.call(this, date)){
  364. var oldValue = opts.current;
  365. $(this).calendar({
  366. year: date.getFullYear(),
  367. month: date.getMonth()+1,
  368. current: date
  369. });
  370. if (!oldValue || oldValue.getTime() != date.getTime()){
  371. opts.onChange.call(this, opts.current, oldValue);
  372. }
  373. }
  374. });
  375. }
  376. };
  377. $.fn.calendar.parseOptions = function(target){
  378. var t = $(target);
  379. return $.extend({}, $.parser.parseOptions(target, [
  380. {firstDay:'number',fit:'boolean',border:'boolean'}
  381. ]));
  382. };
  383. $.fn.calendar.defaults = {
  384. width:180,
  385. height:180,
  386. fit:false,
  387. border:true,
  388. firstDay:0,
  389. weeks:['S','M','T','W','T','F','S'],
  390. months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  391. year:new Date().getFullYear(),
  392. month:new Date().getMonth()+1,
  393. current:(function(){
  394. var d = new Date();
  395. return new Date(d.getFullYear(), d.getMonth(), d.getDate());
  396. })(),
  397. formatter:function(date){return date.getDate()},
  398. styler:function(date){return ''},
  399. validator:function(date){return true},
  400. onSelect: function(date){},
  401. onChange: function(newDate, oldDate){},
  402. onNavigate: function(year, month){}
  403. };
  404. })(jQuery);