|
1 | 1 | /*! |
2 | | - * datepair.js v0.2.1 - A javascript plugin for intelligently selecting date and time ranges inspired by Google Calendar. |
| 2 | + * datepair.js v0.2.2 - A javascript plugin for intelligently selecting date and time ranges inspired by Google Calendar. |
3 | 3 | * Copyright (c) 2014 Jon Thornton - http://jonthornton.github.com/Datepair.js |
4 | 4 | * License: MIT |
5 | 5 | */ |
|
10 | 10 |
|
11 | 11 | var _ONE_DAY = 86400000; |
12 | 12 | var jq = window.Zepto || window.jQuery |
13 | | - |
| 13 | + |
14 | 14 | function simpleExtend(obj1, obj2) { |
15 | 15 | var out = obj2 || {}; |
16 | | - |
| 16 | + |
17 | 17 | for (var i in obj1) { |
18 | 18 | if (!(i in out)) { |
19 | 19 | out[i] = obj1[i] |
20 | 20 | } |
21 | 21 | } |
22 | | - |
| 22 | + |
23 | 23 | return out; |
24 | 24 | } |
25 | | - |
| 25 | + |
26 | 26 | // IE's custom event support is totally borked. |
27 | 27 | // Use jQuery if possible |
28 | 28 | function triggerSimpleCustomEvent(el, eventName) { |
|
34 | 34 | el.dispatchEvent(event); |
35 | 35 | } |
36 | 36 | } |
37 | | - |
| 37 | + |
38 | 38 | // el.classList not supported by < IE10 |
39 | 39 | // use jQuery if available |
40 | 40 | function hasClass(el, className) { |
|
44 | 44 | return el.classList.contains(className); |
45 | 45 | } |
46 | 46 | } |
47 | | - |
| 47 | + |
48 | 48 | function Datepair(container, options) { |
49 | 49 | this.dateDelta = null; |
50 | 50 | this.timeDelta = null; |
|
55 | 55 | dateClass: 'date', |
56 | 56 | defaultDateDelta: 0, |
57 | 57 | defaultTimeDelta: 3600000, |
58 | | - |
| 58 | + |
59 | 59 | // defaults for jquery-timepicker; override when using other input widgets |
60 | 60 | parseTime: function(input){ |
61 | 61 | return jq(input).timepicker('getTime'); |
|
66 | 66 | setMinTime: function(input, dateObj){ |
67 | 67 | jq(input).timepicker('option', 'minTime', dateObj); |
68 | 68 | }, |
69 | | - |
| 69 | + |
70 | 70 | // defaults for bootstrap datepicker; override when using other input widgets |
71 | 71 | parseDate: function(input){ |
72 | 72 | return jq(input).datepicker('getDate'); |
|
75 | 75 | jq(input).datepicker('update', dateObj); |
76 | 76 | } |
77 | 77 | }; |
78 | | - |
| 78 | + |
79 | 79 | this.container = container; |
80 | 80 | this.settings = simpleExtend(this._defaults, options); |
81 | | - |
| 81 | + |
82 | 82 | this.startDateInput = this.container.querySelector('.'+this.settings.startClass+'.'+this.settings.dateClass); |
83 | 83 | this.endDateInput = this.container.querySelector('.'+this.settings.endClass+'.'+this.settings.dateClass); |
84 | 84 | this.startTimeInput = this.container.querySelector('.'+this.settings.startClass+'.'+this.settings.timeClass); |
85 | 85 | this.endTimeInput = this.container.querySelector('.'+this.settings.endClass+'.'+this.settings.timeClass); |
86 | | - |
| 86 | + |
| 87 | + // initialize date and time deltas |
| 88 | + if (this.startDateInput && this.startDateInput.value && this.startDateInput && this.endDateInput.value) { |
| 89 | + var startDate = this.settings.parseDate(this.startDateInput); |
| 90 | + var endDate = this.settings.parseDate(this.endDateInput); |
| 91 | + this.dateDelta = endDate.getTime() - startDate.getTime(); |
| 92 | + } |
| 93 | + if (this.startTimeInput && this.startTimeInput.value && this.endTimeInput && this.endTimeInput.value) { |
| 94 | + var startTime = this.settings.parseTime(this.startTimeInput); |
| 95 | + var endTime = this.settings.parseTime(this.endTimeInput); |
| 96 | + this.timeDelta = endTime.getTime() - startTime.getTime(); |
| 97 | + } |
| 98 | + |
87 | 99 | // init starts here |
88 | 100 | this._bindChangeHandler(); |
89 | 101 | } |
90 | | - |
| 102 | + |
91 | 103 | Datepair.prototype = { |
92 | 104 | constructor: Datepair, |
93 | | - |
| 105 | + |
94 | 106 | _bindChangeHandler: function(){ |
95 | 107 | // addEventListener doesn't work with synthetic "change" events |
96 | 108 | // fired by jQuery's trigger() functioin. If jQuery is present, |
|
101 | 113 | this.container.addEventListener('change', this, false); |
102 | 114 | } |
103 | 115 | }, |
104 | | - |
| 116 | + |
105 | 117 | _unbindChangeHandler: function(){ |
106 | 118 | if (jq) { |
107 | 119 | jq(this.container).off('change.datepair'); |
108 | 120 | } else { |
109 | 121 | this.container.removeEventListener('change', this, false); |
110 | 122 | } |
111 | 123 | }, |
112 | | - |
| 124 | + |
113 | 125 | // This function will be called when passing 'this' to addEventListener |
114 | 126 | handleEvent: function(e){ |
115 | 127 | // temporarily unbind the change handler to prevent triggering this |
116 | 128 | // if we update other inputs |
117 | 129 | this._unbindChangeHandler(); |
118 | | - |
| 130 | + |
119 | 131 | if (hasClass(e.target, this.settings.dateClass)) { |
120 | 132 | if (e.target.value != '') { |
121 | 133 | this._dateChanged(e.target); |
122 | 134 | } else { |
123 | 135 | this.dateDelta = null; |
124 | 136 | } |
125 | | - |
| 137 | + |
126 | 138 | } else if (hasClass(e.target, this.settings.timeClass)) { |
127 | 139 | if (e.target.value != '') { |
128 | 140 | this._timeChanged(e.target); |
129 | 141 | } else { |
130 | 142 | this.timeDelta = null; |
131 | 143 | } |
132 | 144 | } |
133 | | - |
| 145 | + |
134 | 146 | this._validateRanges(); |
135 | 147 | this._updateEndMintime() |
136 | 148 | this._bindChangeHandler(); |
137 | 149 | }, |
138 | | - |
| 150 | + |
139 | 151 | _dateChanged: function(target){ |
140 | 152 | if (!this.startDateInput || !this.endDateInput) { |
141 | 153 | return |
142 | 154 | } |
143 | | - |
| 155 | + |
144 | 156 | if (!this.startDateInput.value || !this.endDateInput.value) { |
145 | 157 | if (this.settings.defaultDateDelta !== null) { |
146 | 158 | if (this.startDateInput.value) { |
147 | 159 | var startDate = this.settings.parseDate(this.startDateInput); |
148 | 160 | var newEnd = new Date(startDate.getTime() + this.settings.defaultDateDelta * _ONE_DAY); |
149 | 161 | this.settings.updateDate(this.endDateInput, newEnd); |
150 | | - |
| 162 | + |
151 | 163 | } else if (this.endDateInput.value) { |
152 | 164 | var endDate = this.settings.parseDate($endDateInput); |
153 | 165 | var newStart = new Date(endDate.getTime() - this.settings.defaultDateDelta * _ONE_DAY); |
154 | 166 | this.settings.updateDate(this.startDateInput, newStart); |
155 | 167 | } |
156 | | - |
| 168 | + |
157 | 169 | this.dateDelta = this.settings.defaultDateDelta * _ONE_DAY; |
158 | 170 | } else { |
159 | 171 | this.dateDelta = null; |
160 | 172 | } |
161 | | - |
| 173 | + |
162 | 174 | return; |
163 | 175 | } |
164 | | - |
| 176 | + |
165 | 177 | var startDate = this.settings.parseDate(this.startDateInput); |
166 | 178 | var endDate = this.settings.parseDate(this.endDateInput); |
167 | | - |
| 179 | + |
168 | 180 | if (hasClass(target, this.settings.startClass)) { |
169 | 181 | var newEndDate = new Date(startDate.getTime() + this.dateDelta); |
170 | 182 | this.settings.updateDate(this.endDateInput, newEndDate); |
|
177 | 189 | } |
178 | 190 | } |
179 | 191 | }, |
180 | | - |
| 192 | + |
181 | 193 | _timeChanged: function(target){ |
182 | 194 | if (!this.startTimeInput || !this.endTimeInput) { |
183 | 195 | return |
184 | 196 | } |
185 | | - |
| 197 | + |
186 | 198 | if (!this.startTimeInput.value || !this.endTimeInput.value) { |
187 | 199 | if (this.settings.defaultTimeDelta !== null) { |
188 | 200 | if (this.startTimeInput.value) { |
|
194 | 206 | var newStart = new Date(endTime.getTime() - this.settings.defaultTimeDelta); |
195 | 207 | this.settings.updateTime(this.startTimeInput, newStart); |
196 | 208 | } |
197 | | - |
| 209 | + |
198 | 210 | this.timeDelta = this.settings.defaultTimeDelta; |
199 | 211 | } else { |
200 | 212 | this.timeDelta = null; |
201 | 213 | } |
202 | | - |
| 214 | + |
203 | 215 | return; |
204 | 216 | } |
205 | | - |
| 217 | + |
206 | 218 | var startTime = this.settings.parseTime(this.startTimeInput); |
207 | 219 | var endTime = this.settings.parseTime(this.endTimeInput); |
208 | | - |
| 220 | + |
209 | 221 | if (hasClass(target, this.settings.startClass)) { |
210 | 222 | var newEndTime = new Date(startTime.getTime() + this.timeDelta); |
211 | 223 | this.settings.updateTime(this.endTimeInput, newEndTime); |
212 | 224 | endTime = this.settings.parseTime(this.endTimeInput); |
213 | 225 | } |
214 | | - |
| 226 | + |
215 | 227 | if (this.endDateInput && this.endDateInput.value && this.dateDelta + this.timeDelta < _ONE_DAY && (endTime.getTime() - startTime.getTime()) * this.timeDelta < 0) { |
216 | 228 | var offset = (endTime < startTime) ? _ONE_DAY : -1 * _ONE_DAY; |
217 | 229 | var endDate = this.settings.parseDate(this.endDateInput); |
218 | 230 | this.settings.updateDate(this.endDateInput, new Date(endDate.getTime() + offset)); |
219 | 231 | this._dateChanged(this.endDateInput); |
220 | 232 | } |
221 | | - |
| 233 | + |
222 | 234 | this.timeDelta = endTime.getTime() - startTime.getTime(); |
223 | 235 | }, |
224 | | - |
| 236 | + |
225 | 237 | _updateEndMintime: function(){ |
226 | 238 | if (typeof this.settings.setMinTime != 'function') return; |
227 | | - |
| 239 | + |
228 | 240 | var startTime = null; |
229 | 241 | if (!this.dateDelta || this.dateDelta < _ONE_DAY || (this.timeDelta && this.dateDelta + this.timeDelta < _ONE_DAY)) { |
230 | 242 | startTime = this.settings.parseTime(this.startTimeInput); |
231 | 243 | } |
232 | | - |
| 244 | + |
233 | 245 | this.settings.setMinTime(this.endTimeInput, startTime); |
234 | 246 | }, |
235 | | - |
| 247 | + |
236 | 248 | _validateRanges: function(){ |
237 | 249 | if (this.startTimeInput && this.endTimeInput && this.timeDelta === null) { |
238 | 250 | triggerSimpleCustomEvent(this.container, 'rangeIncomplete'); |
239 | 251 | return; |
240 | 252 | } |
241 | | - |
| 253 | + |
242 | 254 | if (this.startDateInput && this.endDateInput && this.dateDelta === null) { |
243 | 255 | triggerSimpleCustomEvent(this.container, 'rangeIncomplete'); |
244 | 256 | return; |
245 | 257 | } |
246 | | - |
| 258 | + |
247 | 259 | if (this.dateDelta + this.timeDelta >= 0) { |
248 | 260 | triggerSimpleCustomEvent(this.container, 'rangeSelected'); |
249 | 261 | } else { |
|
257 | 269 | }(window, document)); |
258 | 270 |
|
259 | 271 | /*! |
260 | | - * datepair.js v0.2.1 - A javascript plugin for intelligently selecting date and time ranges inspired by Google Calendar. |
| 272 | + * datepair.js v0.2.2 - A javascript plugin for intelligently selecting date and time ranges inspired by Google Calendar. |
261 | 273 | * Copyright (c) 2014 Jon Thornton - http://jonthornton.github.com/Datepair.js |
262 | 274 | * License: MIT |
263 | 275 | */ |
|
0 commit comments