Web Date Range Picker

DatePicker Public Interface

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

Public API

Attributes, methods, events, and callbacks

Attributes

Attribute	Type	Default
`auto-close`	never \| selection \| apply	selection
`calendar-open-trigger`	focus \| typing \| manual	focus
`calendar-placement`	string (Floating UI)	bottom-start
`date-format-mask`	string	YYYY-MM-DD
`disabled`	boolean	false
`disabled-dates-handling`	allow \| prevent \| block \| split \| individual	allow
`disabled-weekdays`	string (comma-sep)	-
`enable-transitions`	boolean	false
`display-format-mask`	string	-
`grid-columns`	number	-
`grid-rows`	number	-
`highlight-disabled-in-range`	boolean	true
`initial-date`	string (YYYY-MM-DD)	today
`locale`	string \| auto	auto
`max-date`	string (YYYY-MM-DD)	-
`min-date`	string (YYYY-MM-DD)	-
`month-layout`	horizontal \| grid	horizontal
`placeholder`	string	-
`positioning-mode`	floating \| inline	floating
`rolling-month-range`	string (MM-MM)	01-12
`rolling-year-range`	string (YYYY or YYYY-YYYY)	±1 year
`selection-mode`	single \| range \| multiple	single
`show-apply-button`	boolean	auto
`show-clear-button`	boolean	true
`show-debug-info`	boolean	false
`show-today-button`	boolean	true
`unified-header-interactive`	boolean	false
`unified-navigation`	boolean	false
`unified-navigation-anchor-index`	number	0
`value`	string	-
`visible-months-count`	number	1
`week-start-day`	auto \| 0-6	auto

Methods

Method	Returns	Description
`clearSelection()`	void	Clear current selection
`destroy()`	void	Destroy picker instance
`getInputValue()`	string	Get input value as string
`getSelectedDate()`	Date \| null	Get selected date (single mode)
`getSelectedRange()`	DateRange \| null	Get selected range (range mode)
`hide()`	void	Hide the calendar popup
`setInputValue(value)`	void	Set input value
`setMonthNames(names)`	void	Set custom month names
`setRollingItemAlignment(alignment)`	void	Set rolling selector alignment
`show()`	void	Show the calendar popup
`toggle()`	void	Toggle calendar visibility

Events & Callbacks

Event/Callback	Type	Description
DOM Events
`calendar-hide`	CustomEvent	Fired when calendar closes
`calendar-show`	CustomEvent	Fired when calendar opens
`date-change`	CustomEvent	Fired when selection changes
`date-select`	CustomEvent	Fired when date(s) selected
Callback Properties
`badgeTooltipCallback`	Function	Custom badge tooltip HTML
`beforeDateSelectCallback`	Function	Validate/adjust before selection
`beforeMonthChangedCallback`	Function	Bulk load metadata before render
`customStylesCallback`	Function	Inject CSS into Shadow DOM
`dayTooltipCallback`	Function	Custom day tooltip HTML
`formatSummaryCallback`	Function	Custom summary formatting
`getDateMetadataCallback`	Function	Return DateInfo for custom styling
`getMonthHeaderCallback`	Function	Custom individual month header text
`getUnifiedHeaderCallback`	Function	Custom unified header text
`onSelect`	Function	Called on date selection
`renderDayCallback`	Function	Full custom day cell rendering
`renderDayContentCallback`	Function	Augment default day rendering

CSS Custom Properties

Complete CSS custom properties for 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

Variable	Default
Colors
`--drp-accent-color`	#3b82f6
`--drp-accent-color-hover`	#2563eb
`--drp-text-color-on-accent`	#ffffff
`--drp-border-color`	#e5e7eb
`--drp-dropdown-bg`	#ffffff
`--drp-primary-bg`	#f3f4f6
`--drp-primary-bg-hover`	#e5e7eb
`--drp-text-primary`	#111827
`--drp-text-secondary`	#6b7280
Typography
`--drp-font-size-base`	1rem
`--drp-font-size-lg`	1.125rem
`--drp-font-size-sm`	0.875rem
`--drp-font-size-xs`	0.75rem
`--drp-font-weight-medium`	500
`--drp-font-weight-normal`	400
`--drp-font-weight-semibold`	600

Spacing & Other

Variable	Default
Spacing
`--drp-spacing-lg`	1.5rem
`--drp-spacing-md`	1rem
`--drp-spacing-sm`	0.5rem
`--drp-spacing-xl`	2rem
`--drp-spacing-xs`	0.25rem
Layout / Border Radius
`--drp-border-radius-sm`	4px (day cells, tooltips)
`--drp-border-radius-md`	6px (input, buttons)
`--drp-border-radius-lg`	8px (calendar, selectors)
`--drp-border-radius`	alias for -md
`--drp-border-width-base`	1px
`--drp-border`	1px solid --drp-border-color
`--drp-shadow-xl`	0 20px 25px...
Transitions
`--drp-easing-snappy`	cubic-bezier(...)
`--drp-transition-base`	200ms
`--drp-transition-fast`	150ms

Description

Input Variables

Complete input element styling control

Input Colors

Variable	Default
`--drp-input-bg`	--drp-dropdown-bg
`--drp-input-color`	--drp-text-primary
`--drp-input-border`	--base-input-border
`--drp-input-border-hover`	--base-input-border-hover
`--drp-input-border-focus`	--base-input-border-focus
`--drp-input-placeholder-color`	--drp-text-secondary
`--drp-input-bg-disabled`	--drp-primary-bg

Input Sizes

Variable	Default
`--drp-input-size-xs-height`	--base-input-size-xs-height (31px)
`--drp-input-size-sm-height`	--base-input-size-sm-height (33px)
`--drp-input-size-md-height`	--base-input-size-md-height (35px)
`--drp-input-size-lg-height`	--base-input-size-lg-height (38px)
`--drp-input-size-xl-height`	--base-input-size-xl-height (41px)

Input States

Variable	Default
`--drp-input-focus-shadow-color`	rgba(59, 130, 246, 0.1)
`--drp-input-focus-shadow-size`	3px
`--drp-input-icon-opacity`	0.5

Day Cell Variables

Day cell colors, states, and interactions

Basic States

Variable	Default
`--drp-day-bg-hover`	--drp-primary-bg
`--drp-day-border`	2px solid transparent
`--drp-day-border-hover`	--drp-accent-color
`--drp-day-drag-border`	2px dashed --drp-day-range-bg
`--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

Variable	Default
`--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-text-color-on-accent

Range States

Variable	Default
`--drp-day-range-bg`	--drp-accent-color
`--drp-day-range-color`	--drp-text-color-on-accent

Header & Navigation Variables

Header, navigation buttons, and rolling selector

Header

Variable	Default
`--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

Variable	Default
`--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

Variable	Default
`--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-text-color-on-accent

Button & Summary Variables

Action buttons and summary section

Button States

Variable	Default
`--drp-button-bg`	transparent
`--drp-button-color`	--drp-text-primary
`--drp-button-bg-hover`	--drp-primary-bg
`--drp-button-border`	--drp-border
`--drp-button-border-color`	--drp-border-color
`--drp-button-border-hover`	--drp-accent-color

Button Types

Variable	Default
`--drp-button-apply-bg`	--drp-accent-color
`--drp-button-apply-bg-hover`	--drp-accent-color-hover
`--drp-button-apply-color`	white
`--drp-button-cancel-color`	--drp-text-secondary
`--drp-button-clear-color`	--drp-text-secondary
`--drp-button-today-color`	--drp-accent-color

Summary

Variable	Default
`--drp-summary-border`	--drp-border
`--drp-summary-border-color`	--drp-border-color
`--drp-summary-count-color`	--drp-accent-color
`--drp-summary-text-color`	--drp-text-secondary

Badge Variables

Badge styling for special dates

Badge Types

Variable	Default	Description
`--drp-badge-number-bg`	--drp-accent-color	Number badge background
`--drp-badge-number-color`	--drp-text-color-on-accent	Number badge text
`--drp-badge-count-bg`	#ef4444	Count badge background
`--drp-badge-count-color`	#ffffff	Count badge text
`--drp-badge-text-bg`	--drp-text-secondary	Text badge background
`--drp-badge-text-color`	#ffffff	Text badge text
`--drp-badge-row-height`	16px	Badge row height

Controls

Description

Loading & Tooltip Variables

Loading overlay and tooltip styling

Loading Overlay

Variable	Default
`--drp-loading-overlay-bg`	rgba(255, 255, 255, 0.8)
`--drp-loading-spinner-color`	--drp-border-color
`--drp-loading-spinner-accent`	--drp-accent-color
`--drp-loading-spinner-size`	40px
`--drp-loading-spinner-border-width`	4px

Tooltip

Variable	Default
`--drp-tooltip-bg`	#1f2937
`--drp-tooltip-text-color`	#ffffff
`--drp-tooltip-max-width`	200px