The date picker provides flexible sizing via CSS variables and complete theming control via CSS custom properties.
Sizing Systems:
input-sizeattribute - Controls input field size (floating mode only)--drp-remCSS variable - Scales the entire calendar proportionally- Individual CSS variables - Fine-grained control over spacing, fonts, etc.
spacing, font-size, and cell-size attributes have been removed.
Use the --drp-rem CSS variable instead for global scaling, or override individual CSS variables for fine-grained control.CS01 Input Size
Control input field size with the input-size attribute
Live Demo
Code Examples
Details
input-size Attribute
The input-size attribute controls the input field dimensions independently from calendar sizing.
Available Sizes
xs- 31px (very compact)sm- 33px (compact)md- 35px (default)lg- 38px (spacious)xl- 41px (touch-friendly)
Use Cases
- Floating mode only - This attribute applies to the input field in floating/popup mode
- Coordinated sizing - Combine with
--drp-remfor consistent UI - Mixed sizing - Large touch-friendly input with compact popup calendar
CS02 Calendar Scaling with --drp-rem
Scale the entire calendar by setting the --drp-rem CSS variable
Live Demo
Code Examples
How It Works
How --drp-rem Works
The --drp-rem CSS variable is the base unit (default: 10px) used throughout the component. All spacing, fonts, and sizes are calculated relative to this value.
Scale Values
6px- 60% scale (extra small)8px- 80% scale (small)10px- 100% scale (default)15px- 150% scale (large)20px- 200% scale (extra large)
Important: Shadow DOM
CSS variables must be set directly on the <web-daterangepicker> element (via class or inline style), not on a wrapper div. This is due to Shadow DOM encapsulation.
Benefits
- Proportional scaling - Everything scales together
- Any value - Not limited to preset sizes
- Responsive - Use media queries to scale based on viewport
CS03 Fine-Grained Control
Override individual CSS variables for precise control
Live Demo
Code Examples
Available Variables
Spacing Variables
--drp-spacing-xs- Gap between days (4px)--drp-spacing-sm- Small padding (8px)--drp-spacing-md- Medium padding (16px)--drp-spacing-lg- Large gaps (24px)--drp-spacing-xl- Extra large (32px)
Font Size Variables
--drp-font-size-2xs- Badge text--drp-font-size-xs- Small labels--drp-font-size-sm- Day numbers--drp-font-size-base- Headers--drp-font-size-lg- Large text
Use Cases
- Accessibility - Larger fonts without changing layout
- Dense dashboards - Compact spacing with readable text
- Touch interfaces - Large cells with normal fonts
CS04 Compact Grid Layout
Dense dashboard calendar at 60% scale
Live Demo
Code Example
Details
Use Case
Extra Small (6px) - Perfect for dense dashboards with limited space
Grid Layout Requirements
visible-months-count must equal grid-rows × grid-columns
Example: 2 rows × 3 columns = 6 months
Touch-Friendly 2×3 Grid (150% scale)
Large calendar with generous touch targets - ideal for touch interfaces and accessibility
Code
CS05 CSS Custom Properties (Theming)
Customize colors, borders, and more with CSS variables
Available Variables
Base Color Variables
--drp-dropdown-bg- Calendar background (#ffffff)--drp-accent-color- Primary accent (#3b82f6)--drp-accent-color-hover- Accent hover (#2563eb)--drp-text-primary- Primary text (#111827)--drp-text-secondary- Secondary text (#6b7280)--drp-border-color- Border color (#e5e7eb)--drp-primary-bg- Primary background (#f3f4f6)--drp-primary-bg-hover- Primary hover (#e5e7eb)
Component-Specific Variables
- Input:
--drp-input-bg,--drp-input-color,--drp-input-border, and 9 more - Buttons:
--drp-button-today-color,--drp-button-apply-bg, and 8 more - Day Cells:
--drp-day-text-color,--drp-day-selected-bg, and 10 more - Header/Nav:
--drp-header-text-color,--drp-nav-bg-hover, and 14 more - Badges:
--drp-badge-number-bg,--drp-badge-count-bg, and 4 more
Other Variables
--drp-border-radius- Border radius (0.375rem)--drp-shadow-xl- Extra large shadow--drp-transition-fast- Fast transition (150ms)
Complete list: See API Reference - CSS Custom Properties for all 90+ variables.
Code Examples
How to Use
How CSS Variables Work
The component defines all variables with :host inside its Shadow DOM. You can override them from outside:
- Global - Target
web-daterangepickerselector - Scoped - Add a class and target
web-daterangepicker.your-class - Instance - Use inline styles
Benefits
- Scoped - Theme individual pickers differently
- Dynamic - Change themes at runtime with JavaScript
- Maintainable - No need to modify component source
- Performant - Browser-native CSS variable support
Input Field Styling
Comprehensive input styling with the .drp-input class and CSS custom properties.
Input Variables
--drp-input-bg- Input background color--drp-input-color- Input text color--drp-input-border- Full border (e.g., 1px solid #e5e7eb)--drp-input-border-hover- Border on hover--drp-input-border-focus- Border when focused--drp-input-placeholder-color- Placeholder text--drp-input-focus-shadow-color- Focus ring color
Shadow DOM Note
The date picker uses Shadow DOM for style isolation. The <input> element lives in the light DOM (your page),
while the calendar lives in the shadow DOM (component internals).
Styling Options
Option 1: Override CSS variables
Option 2: Provide Your Own Input
Quick Reference
Sizing Approach
| Method | Usage |
|---|---|
input-size attribute | Input field size (xs, sm, md, lg, xl) |
--drp-rem CSS variable | Scale entire calendar (default: 10px) |
--drp-spacing-* variables | Fine-tune spacing (xs, sm, md, lg, xl) |
--drp-font-size-* variables | Fine-tune font sizes |
--drp-rem Scale Values
| Value | Scale | Use Case |
|---|---|---|
| 6px | 60% | Dense dashboards |
| 8px | 80% | Compact layouts |
| 10px | 100% | Default |
| 15px | 150% | Spacious desktops |
| 20px | 200% | Touch/accessibility |