@@ -12,7 +12,7 @@ import TimePicker from './time-picker.js'
12
12
import EventHandler from './dom/event-handler.js'
13
13
import Manipulator from './dom/manipulator.js'
14
14
import SelectorEngine from './dom/selector-engine.js'
15
- import { defineJQueryPlugin , isRTL } from './util/index.js'
15
+ import { defineJQueryPlugin , getElement , isRTL } from './util/index.js'
16
16
import { convertToDateObject , getLocalDateFromString } from './util/calendar.js'
17
17
18
18
/**
@@ -75,13 +75,14 @@ const Default = {
75
75
ariaNavNextYearLabel : 'Next year' ,
76
76
ariaNavPrevMonthLabel : 'Previous month' ,
77
77
ariaNavPrevYearLabel : 'Previous year' ,
78
+ calendarDate : null ,
78
79
calendars : 2 ,
79
80
cancelButton : 'Cancel' ,
80
81
cancelButtonClasses : [ 'btn' , 'btn-sm' , 'btn-ghost-primary' ] ,
81
82
confirmButton : 'OK' ,
82
83
confirmButtonClasses : [ 'btn' , 'btn-sm' , 'btn-primary' ] ,
83
84
cleaner : true ,
84
- calendarDate : null ,
85
+ container : false ,
85
86
date : null ,
86
87
disabled : false ,
87
88
disabledDates : null ,
@@ -125,13 +126,14 @@ const DefaultType = {
125
126
ariaNavNextYearLabel : 'string' ,
126
127
ariaNavPrevMonthLabel : 'string' ,
127
128
ariaNavPrevYearLabel : 'string' ,
129
+ calendarDate : '(date|number|string|null)' ,
128
130
calendars : 'number' ,
129
131
cancelButton : '(boolean|string)' ,
130
132
cancelButtonClasses : '(array|string)' ,
133
+ cleaner : 'boolean' ,
131
134
confirmButton : '(boolean|string)' ,
132
135
confirmButtonClasses : '(array|string)' ,
133
- cleaner : 'boolean' ,
134
- calendarDate : '(date|number|string|null)' ,
136
+ container : '(string|element|boolean)' ,
135
137
date : '(date|number|string|null)' ,
136
138
disabledDates : '(array|null)' ,
137
139
disabled : 'boolean' ,
@@ -230,6 +232,11 @@ class DateRangePicker extends BaseComponent {
230
232
EventHandler . trigger ( this . _element , EVENT_SHOW )
231
233
this . _element . classList . add ( CLASS_NAME_SHOW )
232
234
this . _element . setAttribute ( 'aria-expanded' , true )
235
+
236
+ if ( this . _config . container ) {
237
+ this . _menu . classList . add ( CLASS_NAME_SHOW )
238
+ }
239
+
233
240
EventHandler . trigger ( this . _element , EVENT_SHOWN )
234
241
235
242
this . _createPopper ( )
@@ -244,6 +251,11 @@ class DateRangePicker extends BaseComponent {
244
251
245
252
this . _element . classList . remove ( CLASS_NAME_SHOW )
246
253
this . _element . setAttribute ( 'aria-expanded' , 'false' )
254
+
255
+ if ( this . _config . container ) {
256
+ this . _menu . classList . remove ( CLASS_NAME_SHOW )
257
+ }
258
+
247
259
EventHandler . trigger ( this . _element , EVENT_HIDDEN )
248
260
}
249
261
@@ -491,7 +503,13 @@ class DateRangePicker extends BaseComponent {
491
503
dropdownEl . append ( this . _createDateRangeFooter ( ) )
492
504
}
493
505
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
+
495
513
this . _menu = dropdownEl
496
514
}
497
515
@@ -629,8 +647,6 @@ class DateRangePicker extends BaseComponent {
629
647
630
648
EventHandler . on ( timePickerStartEl , 'timeChange.coreui.time-picker' , event => {
631
649
this . _changeStartDate ( event . date , true )
632
- // this._startDate = event.date
633
- // this._startInput.value = this._setInputValue(this._startDate)
634
650
this . _calendar . update ( this . _getCalendarConfig ( ) )
635
651
} )
636
652
@@ -642,8 +658,6 @@ class DateRangePicker extends BaseComponent {
642
658
643
659
EventHandler . on ( timePickerEndEl , 'timeChange.coreui.time-picker' , event => {
644
660
this . _changeEndDate ( event . date , true )
645
- // this._endDate = event.date
646
- // this._endInput.value = this._setInputValue(this._endDate)
647
661
this . _calendar . update ( this . _getCalendarConfig ( ) )
648
662
} )
649
663
} else {
@@ -664,12 +678,8 @@ class DateRangePicker extends BaseComponent {
664
678
EventHandler . on ( timePickerEl , 'timeChange.coreui.time-picker' , event => {
665
679
if ( index === 0 ) {
666
680
this . _changeStartDate ( event . date , true )
667
- // this._startDate = event.date
668
- // this._startInput.value = this._setInputValue(this._startDate)
669
681
} else {
670
682
this . _changeEndDate ( event . date , true )
671
- // this._endDate = event.date
672
- // this._endInput.value = this._setInputValue(this._endDate)
673
683
}
674
684
675
685
this . _calendar . update ( this . _getCalendarConfig ( ) )
@@ -851,6 +861,18 @@ class DateRangePicker extends BaseComponent {
851
861
return ''
852
862
}
853
863
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
+
854
876
// Static
855
877
static dateRangePickerInterface ( element , config ) {
856
878
const data = DateRangePicker . getOrCreateInstance ( element , config )
0 commit comments