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