components-date-time-pickers-3730210f52f1d0582cd2752b738a090ca5aaf35758bf19fd7c029e8d17235fb3.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. var ComponentsDateTimePickers = function () {
  2. var handleDatePickers = function () {
  3. if (jQuery().datepicker) {
  4. $('.date-picker').datepicker({
  5. rtl: App.isRTL(),
  6. orientation: "left",
  7. autoclose: true
  8. });
  9. //$('body').removeClass("modal-open"); // fix bug when inline picker is used in modal
  10. }
  11. /* Workaround to restrict daterange past date select: http://stackoverflow.com/questions/11933173/how-to-restrict-the-selectable-date-ranges-in-bootstrap-datepicker */
  12. }
  13. var handleTimePickers = function () {
  14. if (jQuery().timepicker) {
  15. $('.timepicker-default').timepicker({
  16. autoclose: true,
  17. showSeconds: true,
  18. minuteStep: 1
  19. });
  20. $('.timepicker-no-seconds').timepicker({
  21. autoclose: true,
  22. minuteStep: 5
  23. });
  24. $('.timepicker-24').timepicker({
  25. autoclose: true,
  26. minuteStep: 5,
  27. showSeconds: false,
  28. showMeridian: false
  29. });
  30. // handle input group button click
  31. $('.timepicker').parent('.input-group').on('click', '.input-group-btn', function(e){
  32. e.preventDefault();
  33. $(this).parent('.input-group').find('.timepicker').timepicker('showWidget');
  34. });
  35. }
  36. }
  37. var handleDateRangePickers = function () {
  38. if (!jQuery().daterangepicker) {
  39. return;
  40. }
  41. $('#defaultrange').daterangepicker({
  42. opens: (App.isRTL() ? 'left' : 'right'),
  43. format: 'MM/DD/YYYY',
  44. separator: ' to ',
  45. startDate: moment().subtract('days', 29),
  46. endDate: moment(),
  47. minDate: '01/01/2012',
  48. maxDate: '12/31/2018',
  49. },
  50. function (start, end) {
  51. $('#defaultrange input').val(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  52. }
  53. );
  54. $('#defaultrange_modal').daterangepicker({
  55. opens: (App.isRTL() ? 'left' : 'right'),
  56. format: 'MM/DD/YYYY',
  57. separator: ' to ',
  58. startDate: moment().subtract('days', 29),
  59. endDate: moment(),
  60. minDate: '01/01/2012',
  61. maxDate: '12/31/2018',
  62. },
  63. function (start, end) {
  64. $('#defaultrange_modal input').val(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  65. }
  66. );
  67. // this is very important fix when daterangepicker is used in modal. in modal when daterange picker is opened and mouse clicked anywhere bootstrap modal removes the modal-open class from the body element.
  68. // so the below code will fix this issue.
  69. $('#defaultrange_modal').on('click', function(){
  70. if ($('#daterangepicker_modal').is(":visible") && $('body').hasClass("modal-open") == false) {
  71. $('body').addClass("modal-open");
  72. }
  73. });
  74. $('#reportrange').daterangepicker({
  75. opens: (App.isRTL() ? 'left' : 'right'),
  76. startDate: moment().subtract('days', 29),
  77. endDate: moment(),
  78. minDate: '01/01/2012',
  79. maxDate: '12/31/2014',
  80. dateLimit: {
  81. days: 60
  82. },
  83. showDropdowns: true,
  84. showWeekNumbers: true,
  85. timePicker: false,
  86. timePickerIncrement: 1,
  87. timePicker12Hour: true,
  88. ranges: {
  89. 'Today': [moment(), moment()],
  90. 'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
  91. 'Last 7 Days': [moment().subtract('days', 6), moment()],
  92. 'Last 30 Days': [moment().subtract('days', 29), moment()],
  93. 'This Month': [moment().startOf('month'), moment().endOf('month')],
  94. 'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
  95. },
  96. buttonClasses: ['btn'],
  97. applyClass: 'green',
  98. cancelClass: 'default',
  99. format: 'MM/DD/YYYY',
  100. separator: ' to ',
  101. locale: {
  102. applyLabel: 'Apply',
  103. fromLabel: 'From',
  104. toLabel: 'To',
  105. customRangeLabel: 'Custom Range',
  106. daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
  107. monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  108. firstDay: 1
  109. }
  110. },
  111. function (start, end) {
  112. $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  113. }
  114. );
  115. //Set the initial state of the picker label
  116. $('#reportrange span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
  117. }
  118. var handleDatetimePicker = function () {
  119. if (!jQuery().datetimepicker) {
  120. return;
  121. }
  122. $(".form_datetime").datetimepicker({
  123. autoclose: true,
  124. isRTL: App.isRTL(),
  125. format: "dd MM yyyy - hh:ii",
  126. pickerPosition: (App.isRTL() ? "bottom-right" : "bottom-left")
  127. });
  128. $(".form_advance_datetime").datetimepicker({
  129. isRTL: App.isRTL(),
  130. format: "dd MM yyyy - hh:ii",
  131. autoclose: true,
  132. todayBtn: true,
  133. startDate: "2013-02-14 10:00",
  134. pickerPosition: (App.isRTL() ? "bottom-right" : "bottom-left"),
  135. minuteStep: 10
  136. });
  137. $(".form_meridian_datetime").datetimepicker({
  138. isRTL: App.isRTL(),
  139. format: "dd MM yyyy - HH:ii P",
  140. showMeridian: true,
  141. autoclose: true,
  142. pickerPosition: (App.isRTL() ? "bottom-right" : "bottom-left"),
  143. todayBtn: true
  144. });
  145. $('body').removeClass("modal-open"); // fix bug when inline picker is used in modal
  146. }
  147. var handleClockfaceTimePickers = function () {
  148. if (!jQuery().clockface) {
  149. return;
  150. }
  151. $('.clockface_1').clockface();
  152. $('#clockface_2').clockface({
  153. format: 'HH:mm',
  154. trigger: 'manual'
  155. });
  156. $('#clockface_2_toggle').click(function (e) {
  157. e.stopPropagation();
  158. $('#clockface_2').clockface('toggle');
  159. });
  160. $('#clockface_2_modal').clockface({
  161. format: 'HH:mm',
  162. trigger: 'manual'
  163. });
  164. $('#clockface_2_modal_toggle').click(function (e) {
  165. e.stopPropagation();
  166. $('#clockface_2_modal').clockface('toggle');
  167. });
  168. $('.clockface_3').clockface({
  169. format: 'H:mm'
  170. }).clockface('show', '14:30');
  171. }
  172. return {
  173. //main function to initiate the module
  174. init: function () {
  175. handleDatePickers();
  176. handleTimePickers();
  177. handleDatetimePicker();
  178. handleDateRangePickers();
  179. handleClockfaceTimePickers();
  180. }
  181. };
  182. }();
  183. if (App.isAngularJsApp() === false) {
  184. jQuery(document).ready(function() {
  185. ComponentsDateTimePickers.init();
  186. });
  187. }