DateRangePicker

This widget is used by DateRangeField to present a range of selected dates across multiple months.

Date range picker
//<code-header>
fiddle.title = 'Date range picker';
//</code-header>
new DateRangePicker({
    appendTo : targetElement,
    label    : 'Date range picker',
    style    : 'margin-inline:2em'
});

Configs

138

Common

listenersEvents

Other

Enables OK/Cancel button bar to accept date range changes. A value of true shows the OK and Cancel buttons.

multiSelect: range= range

Unlike its base class MultiDatePicker, this config must be set to 'range'.

selection: Date[] | String[]= ["today","today"]

The selection defined by selection and the value defined by value are synchronized. Use of value is preferred since this widget is used together with DateRangeField which also uses value.

cellRendererMultiDatePicker
columnWidget
currentIndexCarousel
dateMultiDatePicker
dateFieldDefaultsAbstractDateRange
datePickerDefaultsMultiDatePicker
dateStepTriggersAbstractDateRange
defaultFocusContainer
drawerPanel
emptyHtmlCarousel
emptyTextCarousel
fieldEndDateAbstractDateRange
fieldStartDateAbstractDateRange
formatAbstractDateRange
headerRendererMultiDatePicker
labelPositionContainer
maxDateMultiDatePicker
minDateMultiDatePicker
navButtonsMultiDatePicker
rangeCarousel
renditionContainer
reserveSlotsCarousel
rtlRTL
scrollOnTabCarousel
shrinkWrapCarousel
slotsCarousel
snapCarousel
spanWidget
valueAbstractDateRange
verticalCarousel
weekRendererMultiDatePicker
weekStartDayMultiDatePicker

Accessibility

ariaLabelWidget
keyMapKeyMap

Content

bbarPanel
defaultsContainer
footerPanel
headerPanel
itemsContainer
lazyItemsContainer
namedItemsContainer
stripsPanel
tbarPanel
textContentContainer
toolsPanel

CSS

bodyClsPanel
borderContainer
clsWidget
colorWidget
htmlClsWidget
itemClsContainer
styleWidget
uiPanel

DOM

adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
tagWidget

Float & align

alignWidget
anchorWidget
centeredWidget
draggableWidget
floatingWidget
xWidget
yWidget

Layout

alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
hideWhenEmptyContainer
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget

misc

tabBarItemsContainer

Misc

dataFieldWidget
disabledWidget
iconPanel
localeClassLocalizable
localizableLocalizable
maskedWidget
ownerWidget
readOnlyWidget
refWidget
rippleWidget
tabWidget
titlePanel
tooltipWidget

Record

recordContainer

Scrolling

State

stateIdState

Properties

115

Class hierarchy

isDateRangePicker: Boolean= truereadonly
Identifies an object as an instance of DateRangePicker class, or subclass thereof.
isDateRangePicker: Boolean= truereadonlystatic
Identifies an object as an instance of DateRangePicker class, or subclass thereof.
isAbstractDateRangeAbstractDateRange
isCarouselCarousel
isContainerContainer
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isLocalizableLocalizable
isMultiDatePickerMultiDatePicker
isPanelPanel
isStateState
isToolableToolable
isWidgetWidget

Other

Enables OK/Cancel button bar to accept date range changes. A value of true shows the OK and Cancel buttons.

$namestaticWidget
columnWidget
currentIndexCarousel
emptyHtmlCarousel
emptyTextCarousel
fieldEndDateAbstractDateRange
fieldStartDateAbstractDateRange
firstItemContainer
formatAbstractDateRange
hasChangesContainer
isValidContainer
itemsContainer
labelPositionContainer
lastItemContainer
rangeCarousel
renditionContainer
reserveSlotsCarousel
rtlRTL
scrollingCarousel
scrollOnTabCarousel
selectionMultiDatePicker
shrinkWrapCarousel
slotsCarousel
snapCarousel
spanWidget
toolsPanel
typestaticWidget
valueAbstractDateRange
valuesContainer
verticalCarousel

Accessibility

keyMapKeyMap

Content

bbarPanel
tbarPanel

CSS

clsWidget

DOM

appendToWidget
contentWidget
datasetWidget
elementWidget
htmlWidget
idWidget
styleWidget

Float & align

xWidget
yWidget

Layout

alignSelfWidget
flexWidget
heightWidget
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
widthWidget

Lifecycle

configBase

Misc

cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
titlePanel
tooltipWidget

Record

recordContainer

State

stateState

Visibility

hiddenWidget
isVisibleWidget

Widget hierarchy

ownerWidget
parentWidget
widgetMapContainer

Functions

81

Configuration

applyDefaultsstaticBase

Events

Float & align

alignToWidget
setXYWidget
showByWidget
toFrontWidget

Lifecycle

createstaticWidget
destroystaticBase
initClassstaticWidget

Misc

attachTooltipstaticWidget
fromElementstaticWidget
fromSelectorstaticWidget
getByIdstaticWidget
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Other

addContainer
backwardCarousel
composeWidget
createOnFrameDelayable
disableWidget
enableWidget
ensureVisibleMultiDatePicker
focusWidget
forwardCarousel
getAtContainer
getWidgetByIdContainer
goCarousel
gotoCarousel
indexFromPosCarousel
insertContainer
LstaticLocalizable
maskWidget
onEvents
posFromIndexCarousel
recomposeWidget
relayAllEvents
removeContainer
removeAllContainer
resetValuesContainer
setValuesContainer
triggerEvents
unEvents
unmaskWidget

State

Visibility

hideWidget
showWidget

Widget hierarchy

closestWidget
containsWidget
ownsWidget
queryWidget
queryAllWidget
upWidget

Events

22
catchAllEvents
destroyEvents
expandPanel
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
selectionChangeMultiDatePicker
showWidget

Event handlers

22

Typedefs

7

CSS variables

52

Inherited