set05

Date-range selection bar

5 / 6
the brief
Wire a date-range picker. The starter holds `start` and `end` in state and marks each cell with one of:

- `data-start` (first day)
- `data-end` (last day)
- `data-in-range` (strictly between)

Style:
- start and end cells get a filled circle (#4f46e5, white text)
- in-range cells get a horizontal bar at vertical center, same indigo at 22% alpha
- the bar visually connects start → end across days, including across weeks
- start cell only tints its right half; end cell only its left half
attribute-selector · jsx · state
preview · live iframe