Skip to content

Commit 92ab75a

Browse files
mrholekmrholek
committed
refactor(CDatePicker, CDateRangePicker, CTimePicker): improve events handling
1 parent 3c42b20 commit 92ab75a

File tree

4 files changed

+70
-107
lines changed

4 files changed

+70
-107
lines changed

‎docs/content/forms/time-picker.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ const timePickerList = timePickerElementList.map(timePickerEl => {
262262

263263
```js
264264
const myTimePicker = document.getElementById('myTimePicker')
265-
myTimePicker.addEventListener('timeChange.coreui.time-picker', (timeString, localeTimeString, date) => {
265+
myTimePicker.addEventListener('timeChange.coreui.time-picker', ({ timeString, localeTimeString, date }) => {
266266
// do something...
267267
})
268268
```

‎js/src/date-picker.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ class DatePicker extends DateRangePicker {
7070
for (const calendar of SelectorEngine.find(SELECTOR_CALENDAR, this._element)) {
7171
EventHandler.on(calendar, 'startDateChange.coreui.calendar', event => {
7272
this._startDate = event.date
73-
this._selectEndDate = event.selectEndDate
7473
this._startInput.value = this._setInputValue(event.date)
74+
this._selectEndDate = false
7575
this._calendar.update(this._getCalendarConfig())
7676

7777
EventHandler.trigger(this._element, EVENT_DATE_CHANGE, {
@@ -82,7 +82,6 @@ class DatePicker extends DateRangePicker {
8282
}
8383

8484
// Static
85-
8685
static datePickerInterface(element, config) {
8786
const data = DatePicker.getOrCreateInstance(element, config)
8887

‎js/src/date-range-picker.js

Lines changed: 56 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -244,65 +244,27 @@ class DateRangePicker extends BaseComponent {
244244
}
245245

246246
cancel() {
247-
this._startDate = this._initialStartDate
248-
this._startInput.value = this._setInputValue(this._initialStartDate)
249-
this._startInput.dispatchEvent(new Event('change'))
247+
this._changeStartDate(this._initialStartDate)
250248

251249
if (this._config.range) {
252-
this._endDate = this._initialEndDate
253-
this._endInput.value = this._setInputValue(this._initialEndDate)
254-
this._endInput.dispatchEvent(new Event('change'))
250+
this._changeEndDate(this._initialEndDate)
255251
}
256252

257253
this.hide()
258254

259255
this._calendar.update(this._getCalendarConfig)
260-
261-
if (this._timePickerStart) {
262-
this._timePickerStart.update(this._getTimePickerConfig(true))
263-
}
264-
265-
if (this._timePickerEnd) {
266-
this._timePickerEnd.update(this._getTimePickerConfig(false))
267-
}
268256
}
269257

270258
clear() {
271-
this._endDate = null
272-
this._endInput.value = ''
273-
this._endInput.dispatchEvent(new Event('change'))
274-
this._startDate = null
275-
this._startInput.value = ''
276-
this._startInput.dispatchEvent(new Event('change'))
277-
259+
this._changeStartDate(null)
260+
this._changeEndDate(null)
278261
this._calendar.update(this._getCalendarConfig())
279-
280-
if (this._timePickerStart) {
281-
this._timePickerStart.update(this._getTimePickerConfig(true))
282-
}
283-
284-
if (this._timePickerEnd) {
285-
this._timePickerEnd.update(this._getTimePickerConfig(false))
286-
}
287262
}
288263

289264
reset() {
290-
this._endDate = this._config.endDate
291-
this._endInput.value = this._setInputValue(this._config.endDate)
292-
this._endInput.dispatchEvent(new Event('change'))
293-
this._startDate = this._config.startDate
294-
this._startInput.value = this._setInputValue(this._config.startDate)
295-
this._startInput.dispatchEvent(new Event('change'))
296-
265+
this._changeStartDate(this._config.startDate)
266+
this._changeEndDate(this._config.endDate)
297267
this._calendar.update(this._getCalendarConfig())
298-
299-
if (this._timePickerStart) {
300-
this._timePickerStart.update(this._getTimePickerConfig(true))
301-
}
302-
303-
if (this._timePickerEnd) {
304-
this._timePickerEnd.update(this._getTimePickerConfig(false))
305-
}
306268
}
307269

308270
update(config) {
@@ -398,39 +360,19 @@ class DateRangePicker extends BaseComponent {
398360
_addCalendarEventListeners() {
399361
for (const calendar of SelectorEngine.find(SELECTOR_CALENDAR, this._element)) {
400362
EventHandler.on(calendar, 'startDateChange.coreui.calendar', event => {
401-
this._startDate = event.date
402-
this._startInput.value = this._setInputValue(event.date)
403-
this._startInput.dispatchEvent(new Event('change'))
404-
405-
if (this._timePickerStart) {
406-
this._timePickerStart.update(this._getTimePickerConfig(true))
407-
}
363+
this._changeStartDate(event.date)
408364

409365
if (!this._config.range && (!this._config.footer && !this._config.timepicker)) {
410366
this.hide()
411367
}
412-
413-
EventHandler.trigger(this._element, EVENT_START_DATE_CHANGE, {
414-
date: event.date
415-
})
416368
})
417369

418370
EventHandler.on(calendar, 'endDateChange.coreui.calendar', event => {
419-
this._endDate = event.date
420-
this._endInput.value = this._setInputValue(event.date)
421-
this._startInput.dispatchEvent(new Event('change'))
422-
423-
if (this._timePickerEnd) {
424-
this._timePickerEnd.update(this._getTimePickerConfig(false))
425-
}
371+
this._changeEndDate(event.date)
426372

427373
if (this._startDate && (!this._config.footer && !this._config.timepicker)) {
428374
this.hide()
429375
}
430-
431-
EventHandler.trigger(this._element, EVENT_END_DATE_CHANGE, {
432-
date: event.date
433-
})
434376
})
435377

436378
EventHandler.on(calendar, 'cellHover.coreui.calendar', event => {
@@ -448,6 +390,34 @@ class DateRangePicker extends BaseComponent {
448390
}
449391
}
450392

393+
_changeStartDate(value, skipTimePickerUpdate = false) {
394+
this._startDate = value
395+
this._startInput.value = this._setInputValue(value)
396+
this._startInput.dispatchEvent(new Event('change'))
397+
398+
EventHandler.trigger(this._element, EVENT_START_DATE_CHANGE, {
399+
date: value
400+
})
401+
402+
if (this._timePickerStart && !skipTimePickerUpdate) {
403+
this._timePickerStart.update(this._getTimePickerConfig(true))
404+
}
405+
}
406+
407+
_changeEndDate(value, skipTimePickerUpdate = false) {
408+
this._endDate = value
409+
this._endInput.value = this._setInputValue(value)
410+
this._endInput.dispatchEvent(new Event('change'))
411+
412+
EventHandler.trigger(this._element, EVENT_END_DATE_CHANGE, {
413+
date: value
414+
})
415+
416+
if (this._timePickerEnd && !skipTimePickerUpdate) {
417+
this._timePickerEnd.update(this._getTimePickerConfig(false))
418+
}
419+
}
420+
451421
_getCalendarConfig() {
452422
return {
453423
calendarDate: this._calendarDate,
@@ -579,24 +549,10 @@ class DateRangePicker extends BaseComponent {
579549
buttonEl.classList.add(...this._getButtonClasses(this._config.rangesButtonsClasses))
580550
buttonEl.role = 'button'
581551
buttonEl.addEventListener('click', () => {
582-
this._startDate = this._config.ranges[key][0]
583-
this._endDate = this._config.ranges[key][1]
584-
this._startInput.value = this._setInputValue(this._startDate)
585-
this._startInput.dispatchEvent(new Event('change'))
586-
this._endInput.value = this._setInputValue(this._endDate)
587-
this._endInput.dispatchEvent(new Event('change'))
552+
this._changeStartDate(this._config.ranges[key][0])
553+
this._changeEndDate(this._config.ranges[key][1])
588554

589555
this._calendar.update(this._getCalendarConfig())
590-
591-
EventHandler.trigger(this._element, EVENT_START_DATE_CHANGE, {
592-
date: this._startDate,
593-
formatedDate: this._formatDate(this._startDate)
594-
})
595-
596-
EventHandler.trigger(this._element, EVENT_END_DATE_CHANGE, {
597-
date: this._endDate,
598-
formatedDate: this._formatDate(this._endDate)
599-
})
600556
})
601557

602558
buttonEl.innerHTML = key
@@ -632,7 +588,7 @@ class DateRangePicker extends BaseComponent {
632588

633589
this._calendar = new Calendar(calendarEl, this._getCalendarConfig())
634590

635-
EventHandler.one(calendarEl, 'calendarDateChange.coreui.calendar', event => {
591+
EventHandler.on(calendarEl, 'calendarDateChange.coreui.calendar', event => {
636592
this._calendarDate = event.date
637593
})
638594

@@ -654,9 +610,10 @@ class DateRangePicker extends BaseComponent {
654610

655611
calendarEl.append(timePickerStartEl)
656612

657-
EventHandler.one(timePickerStartEl, 'timeChange.coreui.time-picker', event => {
658-
this._startDate = event.date
659-
this._startInput.value = this._setInputValue(this._startDate)
613+
EventHandler.on(timePickerStartEl, 'timeChange.coreui.time-picker', event => {
614+
this._changeStartDate(event.date, true)
615+
// this._startDate = event.date
616+
// this._startInput.value = this._setInputValue(this._startDate)
660617
this._calendar.update(this._getCalendarConfig())
661618
})
662619

@@ -666,9 +623,10 @@ class DateRangePicker extends BaseComponent {
666623

667624
this._timepickers.append(timePickerEndEl)
668625

669-
EventHandler.one(timePickerEndEl, 'timeChange.coreui.time-picker', event => {
670-
this._endDate = event.date
671-
this._endInput.value = this._setInputValue(this._endDate)
626+
EventHandler.on(timePickerEndEl, 'timeChange.coreui.time-picker', event => {
627+
this._changeEndDate(event.date, true)
628+
// this._endDate = event.date
629+
// this._endInput.value = this._setInputValue(this._endDate)
672630
this._calendar.update(this._getCalendarConfig())
673631
})
674632
} else {
@@ -686,13 +644,15 @@ class DateRangePicker extends BaseComponent {
686644

687645
this._timepickers.append(timePickerEl)
688646

689-
EventHandler.one(timePickerEl, 'timeChange.coreui.time-picker', event => {
647+
EventHandler.on(timePickerEl, 'timeChange.coreui.time-picker', event => {
690648
if (index === 0) {
691-
this._startDate = event.date
692-
this._startInput.value = this._setInputValue(this._startDate)
649+
this._changeStartDate(event.date, true)
650+
// this._startDate = event.date
651+
// this._startInput.value = this._setInputValue(this._startDate)
693652
} else {
694-
this._endDate = event.date
695-
this._endInput.value = this._setInputValue(this._endDate)
653+
this._changeEndDate(event.date, true)
654+
// this._endDate = event.date
655+
// this._endInput.value = this._setInputValue(this._endDate)
696656
}
697657

698658
this._calendar.update(this._getCalendarConfig())
@@ -714,14 +674,10 @@ class DateRangePicker extends BaseComponent {
714674
todayButtonEl.addEventListener('click', () => {
715675
const date = new Date()
716676
this._calendarDate = date
717-
this._startDate = date
718-
this._startInput.value = this._setInputValue(date)
719-
this._startInput.dispatchEvent(new Event('change'))
677+
this._changeStartDate(date)
720678

721679
if (this._config.range) {
722-
this._endDate = date
723-
this._endInput.value = this._setInputValue(date)
724-
this._endInput.dispatchEvent(new Event('change'))
680+
this._changeEndDate(date)
725681
}
726682

727683
this._calendar.update(this._getCalendarConfig())
@@ -877,7 +833,6 @@ class DateRangePicker extends BaseComponent {
877833
}
878834

879835
// Static
880-
881836
static dateRangePickerInterface(element, config) {
882837
const data = DateRangePicker.getOrCreateInstance(element, config)
883838

‎js/src/time-picker.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -210,26 +210,26 @@ class TimePicker extends BaseComponent {
210210
cancel() {
211211
this._date = this._initialDate
212212
this._setInputValue(this._initialDate || '')
213-
this._input.dispatchEvent(new Event('change'))
214213
this._timePickerBody.innerHTML = ''
215214
this.hide()
216215
this._createTimePickerSelection()
216+
this._emitChangeEvent(this._date)
217217
}
218218

219219
clear() {
220220
this._date = null
221221
this._setInputValue('')
222-
this._input.dispatchEvent(new Event('change'))
223222
this._timePickerBody.innerHTML = ''
224223
this._createTimePickerSelection()
224+
this._emitChangeEvent(this._date)
225225
}
226226

227227
reset() {
228228
this._date = this._convertStringToDate(this._config.time)
229229
this._setInputValue(this._config.time)
230-
this._input.dispatchEvent(new Event('change'))
231230
this._timePickerBody.innerHTML = ''
232231
this._createTimePickerSelection()
232+
this._emitChangeEvent(this._date)
233233
}
234234

235235
update(config) {
@@ -607,6 +607,15 @@ class TimePicker extends BaseComponent {
607607
return footerEl
608608
}
609609

610+
_emitChangeEvent(date) {
611+
this._input.dispatchEvent(new Event('change'))
612+
EventHandler.trigger(this._element, EVENT_TIME_CHANGE, {
613+
timeString: date === null ? null : date.toTimeString(),
614+
localeTimeString: date === null ? null : date.toLocaleTimeString(),
615+
date
616+
})
617+
}
618+
610619
_setUpRolls(initial = false) {
611620
for (const part of Array.from(['hours', 'minutes', 'seconds', 'toggle'])) {
612621
for (const element of SelectorEngine.find(

0 commit comments

Comments
 (0)