Skip to content
Devix Open Source
Search products /
devix.pk

Customize

Styling and theming

The range picker shares the Date Picker's stylesheet and customization system. The full guide lives in Date Picker → Styling and theming. The range-specific parts:

Range variables

Variable Default
--dxd-accent #ea4b71 Start and end days, the active preset
--dxd-accent-text #fff Text on the start and end days
--dxd-band accent at 10% (18% dark) The band between the ends
--dxd-cell 32px Day size, which also sets how wide two months are
--dxd-cell-radius 999px Ends as circles; 6px for rounded squares, 0 for a flat band 
.dxd, .dxd-panel {
  --dxd-accent: #4f46e5;
  --dxd-band: #eef2ff;
  --dxd-cell-radius: 6px;
}

Range classes

  • Band: .is-in-range
  • Ends: .is-range-start, .is-range-end
  • Hover preview: .is-preview
  • Presets: .dxd-preset.is-active
  • Problem summary: .dxd-summary.is-problem, e.g. Choose at least 3 days

With classNames you can add your own classes to dayInRange, dayRangeStart, dayRangeEnd, preset, presetActive, summary, action and actionPrimary. They follow the band while it's being previewed.

Layout options

  • months: 1 | 2 | 3: months side by side ('auto' gives two when they fit). The Two months demo shows the fallback.
  • Presets beside the grid, or above it when space is tight, styled with .dxd-panel--presets-top.
  • Two inputs (endInput): each input gets .dxd-input, and the end input also gets .dxd-input--end. Style them like any other form control.
Updated 12 Sep 2026