jquery.datebox.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. /**
  2. * EasyUI for jQuery 1.5.5.6
  3. *
  4. * Copyright (c) 2009-2018 www.jeasyui.com. All rights reserved.
  5. *
  6. * Licensed under the freeware license: http://www.jeasyui.com/license_freeware.php
  7. * To use it on other terms please contact us: info@jeasyui.com
  8. *
  9. */
  10. /**
  11. * datebox - EasyUI for jQuery
  12. *
  13. * Dependencies:
  14. * calendar
  15. * combo
  16. *
  17. */
  18. (function($){
  19. /**
  20. * create date box
  21. */
  22. function createBox(target){
  23. var state = $.data(target, 'datebox');
  24. var opts = state.options;
  25. $(target).addClass('datebox-f').combo($.extend({}, opts, {
  26. onShowPanel:function(){
  27. bindEvents(this);
  28. setButtons(this);
  29. setCalendar(this);
  30. setValue(this, $(this).datebox('getText'), true);
  31. opts.onShowPanel.call(this);
  32. }
  33. }));
  34. /**
  35. * if the calendar isn't created, create it.
  36. */
  37. if (!state.calendar){
  38. var panel = $(target).combo('panel').css('overflow','hidden');
  39. panel.panel('options').onBeforeDestroy = function(){
  40. var c = $(this).find('.calendar-shared');
  41. if (c.length){
  42. c.insertBefore(c[0].pholder);
  43. }
  44. };
  45. var cc = $('<div class="datebox-calendar-inner"></div>').prependTo(panel);
  46. if (opts.sharedCalendar){
  47. var c = $(opts.sharedCalendar);
  48. if (!c[0].pholder){
  49. c[0].pholder = $('<div class="calendar-pholder" style="display:none"></div>').insertAfter(c);
  50. }
  51. c.addClass('calendar-shared').appendTo(cc);
  52. if (!c.hasClass('calendar')){
  53. c.calendar();
  54. }
  55. state.calendar = c;
  56. } else {
  57. state.calendar = $('<div></div>').appendTo(cc).calendar();
  58. }
  59. $.extend(state.calendar.calendar('options'), {
  60. fit:true,
  61. border:false,
  62. onSelect:function(date){
  63. var target = this.target;
  64. var opts = $(target).datebox('options');
  65. opts.onSelect.call(target, date);
  66. setValue(target, opts.formatter.call(target, date));
  67. $(target).combo('hidePanel');
  68. }
  69. });
  70. }
  71. $(target).combo('textbox').parent().addClass('datebox');
  72. $(target).datebox('initValue', opts.value);
  73. function bindEvents(target){
  74. var opts = $(target).datebox('options');
  75. var panel = $(target).combo('panel');
  76. panel.unbind('.datebox').bind('click.datebox', function(e){
  77. if ($(e.target).hasClass('datebox-button-a')){
  78. var index = parseInt($(e.target).attr('datebox-button-index'));
  79. opts.buttons[index].handler.call(e.target, target);
  80. }
  81. });
  82. }
  83. function setButtons(target){
  84. var panel = $(target).combo('panel');
  85. if (panel.children('div.datebox-button').length){return}
  86. var button = $('<div class="datebox-button"><table cellspacing="0" cellpadding="0" style="width:100%"><tr></tr></table></div>').appendTo(panel);
  87. var tr = button.find('tr');
  88. for(var i=0; i<opts.buttons.length; i++){
  89. var td = $('<td></td>').appendTo(tr);
  90. var btn = opts.buttons[i];
  91. var t = $('<a class="datebox-button-a" href="javascript:;"></a>').html($.isFunction(btn.text) ? btn.text(target) : btn.text).appendTo(td);
  92. t.attr('datebox-button-index', i);
  93. }
  94. tr.find('td').css('width', (100/opts.buttons.length)+'%');
  95. }
  96. function setCalendar(target){
  97. var panel = $(target).combo('panel');
  98. var cc = panel.children('div.datebox-calendar-inner');
  99. panel.children()._outerWidth(panel.width());
  100. state.calendar.appendTo(cc);
  101. state.calendar[0].target = target;
  102. if (opts.panelHeight != 'auto'){
  103. var height = panel.height();
  104. panel.children().not(cc).each(function(){
  105. height -= $(this).outerHeight();
  106. });
  107. cc._outerHeight(height);
  108. }
  109. state.calendar.calendar('resize');
  110. }
  111. }
  112. /**
  113. * called when user inputs some value in text box
  114. */
  115. function doQuery(target, q){
  116. setValue(target, q, true);
  117. }
  118. /**
  119. * called when user press enter key
  120. */
  121. function doEnter(target){
  122. var state = $.data(target, 'datebox');
  123. var opts = state.options;
  124. var current = state.calendar.calendar('options').current;
  125. if (current){
  126. setValue(target, opts.formatter.call(target, current));
  127. $(target).combo('hidePanel');
  128. }
  129. }
  130. function setValue(target, value, remainText){
  131. var state = $.data(target, 'datebox');
  132. var opts = state.options;
  133. var calendar = state.calendar;
  134. calendar.calendar('moveTo', opts.parser.call(target, value));
  135. if (remainText){
  136. $(target).combo('setValue', value);
  137. } else {
  138. if (value){
  139. value = opts.formatter.call(target, calendar.calendar('options').current);
  140. }
  141. $(target).combo('setText', value).combo('setValue', value);
  142. }
  143. }
  144. $.fn.datebox = function(options, param){
  145. if (typeof options == 'string'){
  146. var method = $.fn.datebox.methods[options];
  147. if (method){
  148. return method(this, param);
  149. } else {
  150. return this.combo(options, param);
  151. }
  152. }
  153. options = options || {};
  154. return this.each(function(){
  155. var state = $.data(this, 'datebox');
  156. if (state){
  157. $.extend(state.options, options);
  158. } else {
  159. $.data(this, 'datebox', {
  160. options: $.extend({}, $.fn.datebox.defaults, $.fn.datebox.parseOptions(this), options)
  161. });
  162. }
  163. createBox(this);
  164. });
  165. };
  166. $.fn.datebox.methods = {
  167. options: function(jq){
  168. var copts = jq.combo('options');
  169. return $.extend($.data(jq[0], 'datebox').options, {
  170. width: copts.width,
  171. height: copts.height,
  172. originalValue: copts.originalValue,
  173. disabled: copts.disabled,
  174. readonly: copts.readonly
  175. });
  176. },
  177. cloneFrom: function(jq, from){
  178. return jq.each(function(){
  179. $(this).combo('cloneFrom', from);
  180. $.data(this, 'datebox', {
  181. options: $.extend(true, {}, $(from).datebox('options')),
  182. calendar: $(from).datebox('calendar')
  183. });
  184. $(this).addClass('datebox-f');
  185. });
  186. },
  187. calendar: function(jq){ // get the calendar object
  188. return $.data(jq[0], 'datebox').calendar;
  189. },
  190. initValue: function(jq, value){
  191. return jq.each(function(){
  192. var opts = $(this).datebox('options');
  193. var value = opts.value;
  194. if (value){
  195. value = opts.formatter.call(this, opts.parser.call(this, value));
  196. }
  197. $(this).combo('initValue', value).combo('setText', value);
  198. });
  199. },
  200. setValue: function(jq, value){
  201. return jq.each(function(){
  202. setValue(this, value);
  203. });
  204. },
  205. reset: function(jq){
  206. return jq.each(function(){
  207. var opts = $(this).datebox('options');
  208. $(this).datebox('setValue', opts.originalValue);
  209. });
  210. }
  211. };
  212. $.fn.datebox.parseOptions = function(target){
  213. return $.extend({}, $.fn.combo.parseOptions(target), $.parser.parseOptions(target, ['sharedCalendar']));
  214. };
  215. $.fn.datebox.defaults = $.extend({}, $.fn.combo.defaults, {
  216. panelWidth:250,
  217. panelHeight:'auto',
  218. sharedCalendar:null,
  219. keyHandler: {
  220. up:function(e){},
  221. down:function(e){},
  222. left: function(e){},
  223. right: function(e){},
  224. enter:function(e){doEnter(this)},
  225. query:function(q,e){doQuery(this, q)}
  226. },
  227. currentText:'Today',
  228. closeText:'Close',
  229. okText:'Ok',
  230. buttons:[{
  231. text: function(target){return $(target).datebox('options').currentText;},
  232. handler: function(target){
  233. var opts = $(target).datebox('options');
  234. var now = new Date();
  235. var current = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  236. $(target).datebox('calendar').calendar({
  237. year:current.getFullYear(),
  238. month:current.getMonth()+1,
  239. current:current
  240. });
  241. opts.onSelect.call(target, current);
  242. doEnter(target);
  243. }
  244. },{
  245. text: function(target){return $(target).datebox('options').closeText;},
  246. handler: function(target){
  247. $(this).closest('div.combo-panel').panel('close');
  248. }
  249. }],
  250. formatter:function(date){
  251. var y = date.getFullYear();
  252. var m = date.getMonth()+1;
  253. var d = date.getDate();
  254. return (m<10?('0'+m):m)+'/'+(d<10?('0'+d):d)+'/'+y;
  255. },
  256. parser:function(s){
  257. if (!s) return new Date();
  258. var ss = s.split('/');
  259. var m = parseInt(ss[0],10);
  260. var d = parseInt(ss[1],10);
  261. var y = parseInt(ss[2],10);
  262. if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
  263. return new Date(y,m-1,d);
  264. } else {
  265. return new Date();
  266. }
  267. },
  268. onSelect:function(date){}
  269. });
  270. })(jQuery);