jquery.date_input.pack.js 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. DateInput = (function($) {
  2. function DateInput(el, opts) {
  3. if (typeof(opts) != "object") opts = {};
  4. $.extend(this, DateInput.DEFAULT_OPTS, opts);
  5. this.input = $(el);
  6. this.bindMethodsToObj("show", "hide", "hideIfClickOutside", "keydownHandler", "selectDate");
  7. this.build();
  8. this.selectDate();
  9. this.hide()
  10. };
  11. DateInput.DEFAULT_OPTS = {
  12. month_names: ["一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份", "十月份", "十一月份", "十二月份"],
  13. short_month_names: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
  14. short_day_names: ["日", "一", "二", "三", "四", "五", "六"],
  15. start_of_week: 1
  16. };
  17. DateInput.prototype = {
  18. build: function() {
  19. var monthNav = $('<p class="month_nav">' + '<span class="button prev" title="[Page-Up]">&#171;</span>' + ' <span class="month_name"></span> ' + '<span class="button next" title="[Page-Down]">&#187;</span>' + '</p>');
  20. this.monthNameSpan = $(".month_name", monthNav);
  21. $(".prev", monthNav).click(this.bindToObj(function() {
  22. this.moveMonthBy( - 1)
  23. }));
  24. $(".next", monthNav).click(this.bindToObj(function() {
  25. this.moveMonthBy(1)
  26. }));
  27. var yearNav = $('<p class="year_nav">' + '<span class="button prev" title="[Ctrl+Page-Up]">&#171;</span>' + ' <span class="year_name"></span> ' + '<span class="button next" title="[Ctrl+Page-Down]">&#187;</span>' + '</p>');
  28. this.yearNameSpan = $(".year_name", yearNav);
  29. $(".prev", yearNav).click(this.bindToObj(function() {
  30. this.moveMonthBy( - 12)
  31. }));
  32. $(".next", yearNav).click(this.bindToObj(function() {
  33. this.moveMonthBy(12)
  34. }));
  35. var nav = $('<div class="nav"></div>').append(monthNav, yearNav);
  36. var tableShell = "<table><thead><tr>";
  37. $(this.adjustDays(this.short_day_names)).each(function() {
  38. tableShell += "<th>" + this + "</th>"
  39. });
  40. tableShell += "</tr></thead><tbody></tbody></table>";
  41. this.dateSelector = this.rootLayers = $('<div class="date_selector"></div>').append(nav, tableShell).insertAfter(this.input);
  42. if ($.browser.msie && $.browser.version < 7) {
  43. this.ieframe = $('<iframe class="date_selector_ieframe" frameborder="0" src="#"></iframe>').insertBefore(this.dateSelector);
  44. this.rootLayers = this.rootLayers.add(this.ieframe);
  45. $(".button", nav).mouseover(function() {
  46. $(this).addClass("hover")
  47. });
  48. $(".button", nav).mouseout(function() {
  49. $(this).removeClass("hover")
  50. })
  51. };
  52. this.tbody = $("tbody", this.dateSelector);
  53. this.input.change(this.bindToObj(function() {
  54. this.selectDate()
  55. }));
  56. this.selectDate()
  57. },
  58. selectMonth: function(date) {
  59. var newMonth = new Date(date.getFullYear(), date.getMonth(), 1);
  60. if (!this.currentMonth || !(this.currentMonth.getFullYear() == newMonth.getFullYear() && this.currentMonth.getMonth() == newMonth.getMonth())) {
  61. this.currentMonth = newMonth;
  62. var rangeStart = this.rangeStart(date),
  63. rangeEnd = this.rangeEnd(date);
  64. var numDays = this.daysBetween(rangeStart, rangeEnd);
  65. var dayCells = "";
  66. for (var i = 0; i <= numDays; i++) {
  67. var currentDay = new Date(rangeStart.getFullYear(), rangeStart.getMonth(), rangeStart.getDate() + i, 12, 00);
  68. if (this.isFirstDayOfWeek(currentDay)) dayCells += "<tr>";
  69. if (currentDay.getMonth() == date.getMonth()) {
  70. dayCells += '<td class="selectable_day" date="' + this.dateToString(currentDay) + '">' + currentDay.getDate() + '</td>'
  71. } else {
  72. dayCells += '<td class="unselected_month" date="' + this.dateToString(currentDay) + '">' + currentDay.getDate() + '</td>'
  73. };
  74. if (this.isLastDayOfWeek(currentDay)) dayCells += "</tr>"
  75. };
  76. this.tbody.empty().append(dayCells);
  77. this.monthNameSpan.empty().append(this.monthName(date));
  78. this.yearNameSpan.empty().append(this.currentMonth.getFullYear());
  79. $(".selectable_day", this.tbody).click(this.bindToObj(function(event) {
  80. this.changeInput($(event.target).attr("date"))
  81. }));
  82. $("td[date=" + this.dateToString(new Date()) + "]", this.tbody).addClass("today");
  83. $("td.selectable_day", this.tbody).mouseover(function() {
  84. $(this).addClass("hover")
  85. });
  86. $("td.selectable_day", this.tbody).mouseout(function() {
  87. $(this).removeClass("hover")
  88. })
  89. };
  90. $('.selected', this.tbody).removeClass("selected");
  91. $('td[date=' + this.selectedDateString + ']', this.tbody).addClass("selected")
  92. },
  93. selectDate: function(date) {
  94. if (typeof(date) == "undefined") {
  95. date = this.stringToDate(this.input.val())
  96. };
  97. if (!date) date = new Date();
  98. this.selectedDate = date;
  99. this.selectedDateString = this.dateToString(this.selectedDate);
  100. this.selectMonth(this.selectedDate)
  101. },
  102. changeInput: function(dateString) {
  103. this.input.val(dateString).change();
  104. this.hide()
  105. },
  106. show: function() {
  107. this.rootLayers.css("display", "block");
  108. $([window, document.body]).click(this.hideIfClickOutside);
  109. this.input.unbind("focus", this.show);
  110. $(document.body).keydown(this.keydownHandler);
  111. this.setPosition()
  112. },
  113. hide: function() {
  114. this.rootLayers.css("display", "none");
  115. $([window, document.body]).unbind("click", this.hideIfClickOutside);
  116. this.input.focus(this.show);
  117. $(document.body).unbind("keydown", this.keydownHandler)
  118. },
  119. hideIfClickOutside: function(event) {
  120. if (event.target != this.input[0] && !this.insideSelector(event)) {
  121. this.hide()
  122. }
  123. },
  124. insideSelector: function(event) {
  125. var offset = this.dateSelector.position();
  126. offset.right = offset.left + this.dateSelector.outerWidth();
  127. offset.bottom = offset.top + this.dateSelector.outerHeight();
  128. return event.pageY < offset.bottom && event.pageY > offset.top && event.pageX < offset.right && event.pageX > offset.left
  129. },
  130. keydownHandler: function(event) {
  131. switch (event.keyCode) {
  132. case 9:
  133. case 27:
  134. this.hide();
  135. return;
  136. break;
  137. case 13:
  138. this.changeInput(this.selectedDateString);
  139. break;
  140. case 33:
  141. this.moveDateMonthBy(event.ctrlKey ? -12 : -1);
  142. break;
  143. case 34:
  144. this.moveDateMonthBy(event.ctrlKey ? 12 : 1);
  145. break;
  146. case 38:
  147. this.moveDateBy( - 7);
  148. break;
  149. case 40:
  150. this.moveDateBy(7);
  151. break;
  152. case 37:
  153. this.moveDateBy( - 1);
  154. break;
  155. case 39:
  156. this.moveDateBy(1);
  157. break;
  158. default:
  159. return
  160. }
  161. event.preventDefault()
  162. },
  163. stringToDate: function(string) {
  164. var matches;
  165. if (matches = string.match(/^(\d{1,2}) ([^\s]+) (\d{4,4})$/)) {
  166. return new Date(matches[3], this.shortMonthNum(matches[2]), matches[1], 12, 00)
  167. } else {
  168. return null
  169. }
  170. },
  171. dateToString: function(date) {
  172. return date.getFullYear()+"-"+this.short_month_names[date.getMonth()]+"-" +date.getDate()
  173. },
  174. setPosition: function() {
  175. var offset = this.input.offset();
  176. this.rootLayers.css({
  177. top: offset.top + this.input.outerHeight(),
  178. left: offset.left
  179. });
  180. if (this.ieframe) {
  181. this.ieframe.css({
  182. width: this.dateSelector.outerWidth(),
  183. height: this.dateSelector.outerHeight()
  184. })
  185. }
  186. },
  187. moveDateBy: function(amount) {
  188. var newDate = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate() + amount);
  189. this.selectDate(newDate)
  190. },
  191. moveDateMonthBy: function(amount) {
  192. var newDate = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth() + amount, this.selectedDate.getDate());
  193. if (newDate.getMonth() == this.selectedDate.getMonth() + amount + 1) {
  194. newDate.setDate(0)
  195. };
  196. this.selectDate(newDate)
  197. },
  198. moveMonthBy: function(amount) {
  199. var newMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + amount, this.currentMonth.getDate());
  200. this.selectMonth(newMonth)
  201. },
  202. monthName: function(date) {
  203. return this.month_names[date.getMonth()]
  204. },
  205. bindToObj: function(fn) {
  206. var self = this;
  207. return function() {
  208. return fn.apply(self, arguments)
  209. }
  210. },
  211. bindMethodsToObj: function() {
  212. for (var i = 0; i < arguments.length; i++) {
  213. this[arguments[i]] = this.bindToObj(this[arguments[i]])
  214. }
  215. },
  216. indexFor: function(array, value) {
  217. for (var i = 0; i < array.length; i++) {
  218. if (value == array[i]) return i
  219. }
  220. },
  221. monthNum: function(month_name) {
  222. return this.indexFor(this.month_names, month_name)
  223. },
  224. shortMonthNum: function(month_name) {
  225. return this.indexFor(this.short_month_names, month_name)
  226. },
  227. shortDayNum: function(day_name) {
  228. return this.indexFor(this.short_day_names, day_name)
  229. },
  230. daysBetween: function(start, end) {
  231. start = Date.UTC(start.getFullYear(), start.getMonth(), start.getDate());
  232. end = Date.UTC(end.getFullYear(), end.getMonth(), end.getDate());
  233. return (end - start) / 86400000
  234. },
  235. changeDayTo: function(dayOfWeek, date, direction) {
  236. var difference = direction * (Math.abs(date.getDay() - dayOfWeek - (direction * 7)) % 7);
  237. return new Date(date.getFullYear(), date.getMonth(), date.getDate() + difference)
  238. },
  239. rangeStart: function(date) {
  240. return this.changeDayTo(this.start_of_week, new Date(date.getFullYear(), date.getMonth()), -1)
  241. },
  242. rangeEnd: function(date) {
  243. return this.changeDayTo((this.start_of_week - 1) % 7, new Date(date.getFullYear(), date.getMonth() + 1, 0), 1)
  244. },
  245. isFirstDayOfWeek: function(date) {
  246. return date.getDay() == this.start_of_week
  247. },
  248. isLastDayOfWeek: function(date) {
  249. return date.getDay() == (this.start_of_week - 1) % 7
  250. },
  251. adjustDays: function(days) {
  252. var newDays = [];
  253. for (var i = 0; i < days.length; i++) {
  254. newDays[i] = days[(i + this.start_of_week) % 7]
  255. };
  256. return newDays
  257. }
  258. };
  259. $.fn.date_input = function(opts) {
  260. return this.each(function() {
  261. new DateInput(this, opts)
  262. })
  263. };
  264. $.date_input = {
  265. initialize: function(opts) {
  266. $("input.date_input").date_input(opts)
  267. }
  268. };
  269. return DateInput
  270. })(jQuery);