jquery.datebox.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. /**
  2. * datebox - jQuery EasyUI
  3. *
  4. * Copyright (c) 2009-2013 www.jeasyui.com. All rights reserved.
  5. *
  6. * Licensed under the GPL or commercial licenses
  7. * To use it on other terms please contact us: info@jeasyui.com
  8. * http://www.gnu.org/licenses/gpl.txt
  9. * http://www.jeasyui.com/license_commercial.php
  10. *
  11. * Dependencies:
  12. * calendar
  13. * combo
  14. *
  15. */
  16. (function($){
  17. /**
  18. * create date box
  19. */
  20. function createBox(target){
  21. var state = $.data(target, 'datebox');
  22. var opts = state.options;
  23. $(target).addClass('datebox-f').combo($.extend({}, opts, {
  24. onShowPanel:function(){
  25. setCalendarSize();
  26. opts.onShowPanel.call(target);
  27. }
  28. }));
  29. $(target).combo('textbox').parent().addClass('datebox');
  30. /**
  31. * if the calendar isn't created, create it.
  32. */
  33. if (!state.calendar){
  34. createCalendar();
  35. }
  36. function createCalendar(){
  37. var panel = $(target).combo('panel');
  38. state.calendar = $('<div></div>').appendTo(panel).wrap('<div class="datebox-calendar-inner"></div>');
  39. state.calendar.calendar({
  40. fit:true,
  41. border:false,
  42. onSelect:function(date){
  43. var value = opts.formatter(date);
  44. setValue(target, value);
  45. $(target).combo('hidePanel');
  46. opts.onSelect.call(target, date);
  47. }
  48. });
  49. setValue(target, opts.value);
  50. var button = $('<div class="datebox-button"></div>').appendTo(panel);
  51. var current_btn = $('<a href="javascript:void(0)" class="datebox-current"></a>').html(opts.currentText).appendTo(button);
  52. var close_btn = $('<a href="javascript:void(0)" class="datebox-close"></a>').html(opts.closeText).appendTo(button);
  53. current_btn.click(function(){
  54. state.calendar.calendar({
  55. year:new Date().getFullYear(),
  56. month:new Date().getMonth()+1,
  57. current:new Date()
  58. });
  59. });
  60. close_btn.click(function(){
  61. $(target).combo('hidePanel');
  62. });
  63. }
  64. function setCalendarSize(){
  65. if (opts.panelHeight != 'auto'){
  66. var panel = $(target).combo('panel');
  67. var ci = panel.children('div.datebox-calendar-inner');
  68. var height = panel.height();
  69. panel.children().not(ci).each(function(){
  70. height -= $(this).outerHeight();
  71. });
  72. ci._outerHeight(height);
  73. }
  74. state.calendar.calendar('resize');
  75. }
  76. }
  77. /**
  78. * called when user inputs some value in text box
  79. */
  80. function doQuery(target, q){
  81. setValue(target, q);
  82. }
  83. /**
  84. * called when user press enter key
  85. */
  86. function doEnter(target){
  87. var state = $.data(target, 'datebox');
  88. var opts = state.options;
  89. var c = state.calendar;
  90. var value = opts.formatter(c.calendar('options').current);
  91. setValue(target, value);
  92. $(target).combo('hidePanel');
  93. }
  94. function setValue(target, value){
  95. var state = $.data(target, 'datebox');
  96. var opts = state.options;
  97. $(target).combo('setValue', value).combo('setText', value);
  98. state.calendar.calendar('moveTo', opts.parser(value));
  99. }
  100. $.fn.datebox = function(options, param){
  101. if (typeof options == 'string'){
  102. var method = $.fn.datebox.methods[options];
  103. if (method){
  104. return method(this, param);
  105. } else {
  106. return this.combo(options, param);
  107. }
  108. }
  109. options = options || {};
  110. return this.each(function(){
  111. var state = $.data(this, 'datebox');
  112. if (state){
  113. $.extend(state.options, options);
  114. } else {
  115. $.data(this, 'datebox', {
  116. options: $.extend({}, $.fn.datebox.defaults, $.fn.datebox.parseOptions(this), options)
  117. });
  118. }
  119. createBox(this);
  120. });
  121. };
  122. $.fn.datebox.methods = {
  123. options: function(jq){
  124. var copts = jq.combo('options');
  125. return $.extend($.data(jq[0], 'datebox').options, {
  126. originalValue: copts.originalValue,
  127. disabled: copts.disabled,
  128. readonly: copts.readonly
  129. });
  130. },
  131. calendar: function(jq){ // get the calendar object
  132. return $.data(jq[0], 'datebox').calendar;
  133. },
  134. setValue: function(jq, value){
  135. return jq.each(function(){
  136. setValue(this, value);
  137. });
  138. },
  139. reset: function(jq){
  140. return jq.each(function(){
  141. var opts = $(this).datebox('options');
  142. $(this).datebox('setValue', opts.originalValue);
  143. });
  144. }
  145. };
  146. $.fn.datebox.parseOptions = function(target){
  147. var t = $(target);
  148. return $.extend({}, $.fn.combo.parseOptions(target), {
  149. });
  150. };
  151. $.fn.datebox.defaults = $.extend({}, $.fn.combo.defaults, {
  152. panelWidth:180,
  153. panelHeight:'auto',
  154. keyHandler: {
  155. up:function(){},
  156. down:function(){},
  157. enter:function(){doEnter(this);},
  158. query:function(q){doQuery(this, q);}
  159. },
  160. currentText:'Today',
  161. closeText:'Close',
  162. okText:'Ok',
  163. formatter:function(date){
  164. var y = date.getFullYear();
  165. var m = date.getMonth()+1;
  166. var d = date.getDate();
  167. return m+'/'+d+'/'+y;
  168. },
  169. parser:function(s){
  170. var t = Date.parse(s);
  171. if (!isNaN(t)){
  172. return new Date(t);
  173. } else {
  174. return new Date();
  175. }
  176. },
  177. onSelect:function(date){}
  178. });
  179. })(jQuery);