jquery.ui.jrange.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. // we need to hack the jqueryui datepicker
  2. $.datepicker._defaults.onAfterUpdate = null;
  3. var datepicker__updateDatepicker = $.datepicker._updateDatepicker;
  4. $.datepicker._updateDatepicker = function(inst){
  5. datepicker__updateDatepicker.call(this, inst);
  6. var onAfterUpdate = this._get(inst, 'onAfterUpdate');
  7. if (onAfterUpdate)
  8. onAfterUpdate.apply((inst.input ? inst.input[0] : null),[(inst.input ? inst.input.val() : ''), inst]);
  9. };
  10. (function($){
  11. $.widget("ui.jrange", {
  12. options: {
  13. dateFormat: "D, d M yy"
  14. },
  15. _create: function() {
  16. var self = this;
  17. var o = self.options;
  18. var el = self.element;
  19. self.cur = new Date();
  20. self.prv = self.cur;
  21. self.newSelection = true;
  22. self.input = el.children("input");
  23. self.div = el.children("div");
  24. self.input.val($.datepicker.formatDate(o.dateFormat,self.cur,{}));
  25. self.div.css({position: "absolute"});
  26. self.div.datepicker({
  27. changeMonth: true,
  28. changeYear: true,
  29. showButtonPanel: true,
  30. onSelect: function(dateText, inst){
  31. self.newSelection = self.newSelection || (self.prv.valueOf() != self.cur.valueOf());
  32. var sel = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
  33. if(self.newSelection){
  34. self.prv = self.cur = sel;
  35. self.newSelection = false;
  36. }
  37. else{
  38. self.prv = self.cur;
  39. self.cur = sel;
  40. }
  41. self._updateVal();
  42. },
  43. beforeShowDay: function(date){
  44. return [
  45. true,
  46. ( (date >= Math.min(self.prv, self.cur) && date <= Math.max(self.prv, self.cur)) ? 'date-range-selected' : '')
  47. ];
  48. },
  49. onAfterUpdate: function(dateText, inst){
  50. var buttonpane = self.div.find(".ui-datepicker-buttonpane");
  51. buttonpane.empty();
  52. // "Done"
  53. $('<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" data-handler="hide" data-event="click">Done</button>')
  54. .appendTo(buttonpane)
  55. .on('click', function () { self.div.hide(); });
  56. // "Select month"
  57. $('<button type="button" class="ui-state-default ui-corner-all">Select Month</button>')
  58. .appendTo(buttonpane)
  59. .on('click', function(){
  60. self.newSelection = true;
  61. self.div.find(".ui-datepicker-calendar").find("a:last").click();
  62. self.div.find(".ui-datepicker-calendar").find("a:first").click();
  63. });
  64. }
  65. }).hide();
  66. self.input.on('focus', function(e){
  67. if(self.div.is(":visible")){
  68. self.hide();
  69. }
  70. else{
  71. self.show();
  72. }
  73. });
  74. },
  75. destroy: function() {
  76. var self = this;
  77. self.div.datepicker("destroy");
  78. self.input.off('focus');
  79. },
  80. _setOption: function(option, value) {
  81. var self = this;
  82. var o = self.options;
  83. switch (option) {
  84. case "dateFormat":
  85. o.dateFormat = value;
  86. self._updateVal();
  87. break;
  88. }
  89. },
  90. _updateVal: function() {
  91. var self = this;
  92. var o = self.options;
  93. if(self.prv.valueOf() == self.cur.valueOf()){
  94. self.input.val($.datepicker.formatDate(o.dateFormat,self.cur,{}));
  95. }
  96. else{
  97. var d1 = $.datepicker.formatDate(o.dateFormat,new Date(Math.min(self.prv, self.cur)),{});
  98. var d2 = $.datepicker.formatDate(o.dateFormat,new Date(Math.max(self.prv, self.cur)),{});
  99. self.input.val(d1 + " - " + d2);
  100. }
  101. },
  102. getDate: function() {
  103. var self = this;
  104. return self.getStartDate();
  105. },
  106. getStartDate: function() {
  107. var self = this;
  108. var minDate = new Date(Math.min(self.cur, self.prv));
  109. return new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()); // eliminate time
  110. },
  111. getEndDate: function() {
  112. var self = this;
  113. var maxDate = new Date(Math.max(self.cur, self.prv));
  114. return new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()+1); // eliminate time and add a day
  115. },
  116. show: function() {
  117. var self = this;
  118. self.newSelection = true;
  119. self.div.show().position({
  120. my: 'left top',
  121. at: 'left bottom',
  122. of: self.input
  123. });
  124. },
  125. hide: function() {
  126. var self = this;
  127. self.div.hide();
  128. }
  129. });
  130. }(jQuery));