Skip to content

Commit 9ced708

Browse files
committed
feat(CDatePicker, CDateRangePicker): allows to append the dropdown to a specific element
1 parent ee781c8 commit 9ced708

File tree

2 files changed

+39
-15
lines changed

2 files changed

+39
-15
lines changed

js/src/date-range-picker.js

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import TimePicker from './time-picker.js'
1212
import EventHandler from './dom/event-handler.js'
1313
import Manipulator from './dom/manipulator.js'
1414
import SelectorEngine from './dom/selector-engine.js'
15-
import { defineJQueryPlugin, isRTL } from './util/index.js'
15+
import { defineJQueryPlugin, getElement, isRTL } from './util/index.js'
1616
import { convertToDateObject, getLocalDateFromString } from './util/calendar.js'
1717

1818
/**
@@ -75,13 +75,14 @@ const Default = {
7575
ariaNavNextYearLabel: 'Next year',
7676
ariaNavPrevMonthLabel: 'Previous month',
7777
ariaNavPrevYearLabel: 'Previous year',
78+
calendarDate: null,
7879
calendars: 2,
7980
cancelButton: 'Cancel',
8081
cancelButtonClasses: ['btn', 'btn-sm', 'btn-ghost-primary'],
8182
confirmButton: 'OK',
8283
confirmButtonClasses: ['btn', 'btn-sm', 'btn-primary'],
8384
cleaner: true,
84-
calendarDate: null,
85+
container: false,
8586
date: null,
8687
disabled: false,
8788
disabledDates: null,
@@ -125,13 +126,14 @@ const DefaultType = {
125126
ariaNavNextYearLabel: 'string',
126127
ariaNavPrevMonthLabel: 'string',
127128
ariaNavPrevYearLabel: 'string',
129+
calendarDate: '(date|number|string|null)',
128130
calendars: 'number',
129131
cancelButton: '(boolean|string)',
130132
cancelButtonClasses: '(array|string)',
133+
cleaner: 'boolean',
131134
confirmButton: '(boolean|string)',
132135
confirmButtonClasses: '(array|string)',
133-
cleaner: 'boolean',
134-
calendarDate: '(date|number|string|null)',
136+
container: '(string|element|boolean)',
135137
date: '(date|number|string|null)',
136138
disabledDates: '(array|null)',
137139
disabled: 'boolean',
@@ -230,6 +232,11 @@ class DateRangePicker extends BaseComponent {
230232
EventHandler.trigger(this._element, EVENT_SHOW)
231233
this._element.classList.add(CLASS_NAME_SHOW)
232234
this._element.setAttribute('aria-expanded', true)
235+
236+
if (this._config.container) {
237+
this._menu.classList.add(CLASS_NAME_SHOW)
238+
}
239+
233240
EventHandler.trigger(this._element, EVENT_SHOWN)
234241

235242
this._createPopper()
@@ -244,6 +251,11 @@ class DateRangePicker extends BaseComponent {
244251

245252
this._element.classList.remove(CLASS_NAME_SHOW)
246253
this._element.setAttribute('aria-expanded', 'false')
254+
255+
if (this._config.container) {
256+
this._menu.classList.remove(CLASS_NAME_SHOW)
257+
}
258+
247259
EventHandler.trigger(this._element, EVENT_HIDDEN)
248260
}
249261

@@ -491,7 +503,13 @@ class DateRangePicker extends BaseComponent {
491503
dropdownEl.append(this._createDateRangeFooter())
492504
}
493505

494-
this._element.append(dropdownEl)
506+
const { container } = this._config
507+
if (container) {
508+
container.append(dropdownEl)
509+
} else {
510+
this._element.append(dropdownEl)
511+
}
512+
495513
this._menu = dropdownEl
496514
}
497515

@@ -629,8 +647,6 @@ class DateRangePicker extends BaseComponent {
629647

630648
EventHandler.on(timePickerStartEl, 'timeChange.coreui.time-picker', event => {
631649
this._changeStartDate(event.date, true)
632-
// this._startDate = event.date
633-
// this._startInput.value = this._setInputValue(this._startDate)
634650
this._calendar.update(this._getCalendarConfig())
635651
})
636652

@@ -642,8 +658,6 @@ class DateRangePicker extends BaseComponent {
642658

643659
EventHandler.on(timePickerEndEl, 'timeChange.coreui.time-picker', event => {
644660
this._changeEndDate(event.date, true)
645-
// this._endDate = event.date
646-
// this._endInput.value = this._setInputValue(this._endDate)
647661
this._calendar.update(this._getCalendarConfig())
648662
})
649663
} else {
@@ -664,12 +678,8 @@ class DateRangePicker extends BaseComponent {
664678
EventHandler.on(timePickerEl, 'timeChange.coreui.time-picker', event => {
665679
if (index === 0) {
666680
this._changeStartDate(event.date, true)
667-
// this._startDate = event.date
668-
// this._startInput.value = this._setInputValue(this._startDate)
669681
} else {
670682
this._changeEndDate(event.date, true)
671-
// this._endDate = event.date
672-
// this._endInput.value = this._setInputValue(this._endDate)
673683
}
674684

675685
this._calendar.update(this._getCalendarConfig())
@@ -851,6 +861,18 @@ class DateRangePicker extends BaseComponent {
851861
return ''
852862
}
853863

864+
_configAfterMerge(config) {
865+
if (config.container === true) {
866+
config.container = document.body
867+
}
868+
869+
if (typeof config.container === 'object' || typeof config.container === 'string') {
870+
config.container = getElement(config.container)
871+
}
872+
873+
return config
874+
}
875+
854876
// Static
855877
static dateRangePickerInterface(element, config) {
856878
const data = DateRangePicker.getOrCreateInstance(element, config)

scss/_date-picker.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
.date-picker {
1+
.date-picker,
2+
*:not(.date-picker) > .date-picker-dropdown {
23
// scss-docs-start date-picker-css-vars
34
--#{$prefix}date-picker-zindex: #{$date-picker-zindex};
45
--#{$prefix}date-picker-font-family: #{$date-picker-font-family};
@@ -199,7 +200,8 @@
199200
@include box-shadow(var(--#{$prefix}date-picker-dropdown-box-shadow));
200201
@include elevation(4);
201202

202-
.date-picker.show & {
203+
.date-picker.show &,
204+
&.show {
203205
display: block;
204206
}
205207
}

0 commit comments

Comments
 (0)