DatePicker Public Interface

All attributes, methods, events, and callbacks available on the <web-daterangepicker> element.

Public API

Attributes, methods, events, and callbacks

Attributes
AttributeTypeDefault
auto-closenever | selection | applyselection
calendar-open-triggerfocus | typing | manualfocus
calendar-placementstring (Floating UI)bottom-start
cell-sizexs | sm | md | lg | xlmd
date-format-maskstringYYYY-MM-DD
disabledbooleanfalse
disabled-dates-handlingallow | prevent | block | split | individualallow
disabled-weekdaysstring (comma-sep)-
display-format-maskstring-
font-sizexs | sm | md | lg | xlmd
grid-columnsnumber-
grid-rowsnumber-
highlight-disabled-in-rangebooleantrue
initial-datestring (YYYY-MM-DD)today
localestring | autoauto
max-datestring (YYYY-MM-DD)-
min-datestring (YYYY-MM-DD)-
month-layouthorizontal | gridhorizontal
placeholderstring-
positioning-modefloating | inlinefloating
rolling-month-rangestring (MM-MM)01-12
rolling-year-rangestring (YYYY or YYYY-YYYY)±1 year
selection-modesingle | range | multiplesingle
show-apply-buttonbooleanauto
show-clear-buttonbooleantrue
show-today-buttonbooleantrue
spacingxs | sm | md | lg | xlmd
unified-header-interactivebooleanfalse
unified-navigationbooleanfalse
unified-navigation-anchor-indexnumber0
valuestring-
visible-months-countnumber1
week-start-dayauto | 0-6auto
Methods
MethodReturnsDescription
clearSelection()voidClear current selection
destroy()voidDestroy picker instance
getInputValue()stringGet input value as string
getSelectedDate()Date | nullGet selected date (single mode)
getSelectedRange()DateRange | nullGet selected range (range mode)
hide()voidHide the calendar popup
setInputValue(value)voidSet input value
show()voidShow the calendar popup
toggle()voidToggle calendar visibility
Events & Callbacks
Event/CallbackTypeDescription
DOM Events
calendar-hideCustomEventFired when calendar closes
calendar-showCustomEventFired when calendar opens
date-changeCustomEventFired when selection changes
date-selectCustomEventFired when date(s) selected
Callback Properties
badgeTooltipCallbackFunctionCustom badge tooltip HTML
beforeDateSelectCallbackFunctionValidate/adjust before selection
beforeMonthChangedCallbackFunctionBulk load metadata before render
customStylesCallbackFunctionInject CSS into Shadow DOM
dayTooltipCallbackFunctionCustom day tooltip HTML
formatSummaryCallbackFunctionCustom summary formatting
getDateMetadataCallbackFunctionReturn DateInfo for custom styling
getUnifiedHeaderCallbackFunctionCustom unified header text
onSelectFunctionCalled on date selection
renderDayCallbackFunctionFull custom day cell rendering
renderDayContentCallbackFunctionAugment default day rendering

CSS Custom Properties

Version 1.3.0 includes 90+ CSS custom properties for complete theming control. Variables are organized into base variables (foundation) and semantic component-specific variables.

Base Variables

Foundation colors, typography, spacing, and layout properties

Colors & Typography
VariableDefault
Colors
--drp-accent-color#3b82f6
--drp-accent-color-hover#2563eb
--drp-accent-text-color#ffffff
--drp-border-color#e5e7eb
--drp-card-bg#ffffff
--drp-primary-bg#f3f4f6
--drp-primary-bg-hover#e5e7eb
--drp-text-primary#111827
--drp-text-secondary#6b7280
Typography
--drp-font-size-base1rem
--drp-font-size-lg1.125rem
--drp-font-size-sm0.875rem
--drp-font-size-xs0.75rem
--drp-font-weight-medium500
--drp-font-weight-normal400
--drp-font-weight-semibold600
Spacing & Other
VariableDefault
Spacing
--drp-spacing-lg1.5rem
--drp-spacing-md1rem
--drp-spacing-sm0.5rem
--drp-spacing-xl2rem
--drp-spacing-xs0.25rem
Layout
--drp-border-radius0.375rem
--drp-border-width-base1px
--drp-shadow-xl0 20px 25px...
Transitions
--drp-easing-snappycubic-bezier(...)
--drp-transition-base200ms
--drp-transition-fast150ms
Description

Input Variables

New in v1.3.0 - Complete input element styling control

Input Colors
VariableDefault
--drp-input-background--drp-card-bg
--drp-input-color--drp-text-primary
--drp-input-border-color--drp-border-color
--drp-input-border-color-hover--drp-accent-color
--drp-input-border-color-focus--drp-accent-color
--drp-input-placeholder-color--drp-text-secondary
--drp-input-disabled-background--drp-primary-bg
Input Sizes
VariableDefault
--drp-input-size-xs-height3.1rem (31px)
--drp-input-size-sm-height3.3rem (33px)
--drp-input-size-md-height3.5rem (35px)
--drp-input-size-lg-height3.8rem (38px)
--drp-input-size-xl-height4.1rem (41px)
Input States
VariableDefault
--drp-input-focus-shadow-colorrgba(59, 130, 246, 0.1)
--drp-input-focus-shadow-size3px
--drp-input-icon-opacity0.5

Day Cell Variables

New in v1.3.0 - Day cell colors, states, and interactions

Basic States
VariableDefault
--drp-day-bg-hover--drp-primary-bg
--drp-day-border-hover--drp-accent-color
--drp-day-disabled-color--drp-text-secondary
--drp-day-other-month-color--drp-text-secondary
--drp-day-text-color--drp-text-primary
--drp-day-today-border--drp-accent-color
--drp-weekday-color--drp-text-secondary
Selection States
VariableDefault
--drp-day-focused-outline--drp-accent-color
--drp-day-selected-bg--drp-accent-color
--drp-day-selected-bg-hover--drp-accent-color-hover
--drp-day-selected-color--drp-accent-text-color
Range States
VariableDefault
--drp-day-range-bg--drp-accent-color
--drp-day-range-color--drp-accent-text-color

Header & Navigation Variables

New in v1.3.0 - Header, navigation buttons, and rolling selector

Header
VariableDefault
--drp-header-bg-active--drp-primary-bg-hover
--drp-header-bg-hover--drp-primary-bg
--drp-header-text-color--drp-text-primary
--drp-unified-month-color--drp-text-secondary
--drp-unified-range-bg-hover--drp-primary-bg
--drp-unified-range-text-color--drp-text-primary
Navigation Buttons
VariableDefault
--drp-nav-bg-active--drp-primary-bg-hover
--drp-nav-bg-hover--drp-primary-bg
--drp-nav-border-color--drp-border-color
--drp-nav-border-hover--drp-accent-color
--drp-nav-text-color--drp-text-primary
Rolling Selector
VariableDefault
--drp-rolling-bg--drp-primary-bg
--drp-rolling-border-color--drp-border-color
--drp-rolling-item-bg-hover--drp-primary-bg
--drp-rolling-item-bg-selected--drp-accent-color
--drp-rolling-item-color-selected--drp-accent-text-color

Button & Summary Variables

New in v1.3.0 - Action buttons and summary section

Button States
VariableDefault
--drp-button-bg-hover--drp-primary-bg
--drp-button-border-color--drp-border-color
--drp-button-border-hover--drp-accent-color
Button Types
VariableDefault
--drp-button-apply-bg--drp-accent-color
--drp-button-apply-bg-hover--drp-accent-color-hover
--drp-button-apply-colorwhite
--drp-button-cancel-color--drp-text-secondary
--drp-button-clear-color--drp-text-secondary
--drp-button-today-color--drp-accent-color
Summary
VariableDefault
--drp-summary-border-color--drp-border-color
--drp-summary-count-color--drp-accent-color
--drp-summary-text-color--drp-text-secondary

Badge Variables

New in v1.3.0 - Badge styling for special dates

Badge Types
VariableDefaultDescription
--drp-badge-number-bg--drp-accent-colorNumber badge background
--drp-badge-number-color--drp-accent-text-colorNumber badge text
--drp-badge-count-bg#ef4444Count badge background
--drp-badge-count-color#ffffffCount badge text
--drp-badge-text-bg--drp-text-secondaryText badge background
--drp-badge-text-color#ffffffText badge text
Controls
Description