# Date range picker

HTML has no date range field. This is one text field for a period: click it, a month opens under it; click a
day for the start, click another for the end. The start and end are marked, the days between are highlighted.
The value is `YYYY-MM-DD – YYYY-MM-DD` (start – end). If the second day is before the first, they swap.
Typing works too (`2028-02-01 – 2028-02-29`); text that is not two real days marks the field (`aria-invalid="true"`).
Escape, Enter, or focusing the field again while only the start is picked drops that start and keeps the old range.
Live demo: https://components.hybriel.worldapi.org/range-picker

Pure Hybriel: one file, no JavaScript file. The browser's today is read, and the names follow the page language (`<html lang>`, English when none), when the field gets focus.

## Use it in an app

Copy `components/range-picker/range-picker.hl` (optionally `shared/tokens.hl` for the app's own accent; it carries its own `Style`), then:

```
import RangePicker from './range-picker.hl'

View {
	form { method = "get"  action = "/search"
		RangePicker { }
	}
}
```

- The field is named `range` (member `name`); it posts as `range=YYYY-MM-DD – YYYY-MM-DD`.
- Do not wrap the picker in a `<label>`.
- One per page (a composed component's members are the page's state).
- Colours are the semantic tokens only, each with a black/white/grey fallback: the base look is black, white and greys (no frames; root README "Look"); an app that declares the WorldAPI tokens (layouts.worldapi.org's theme) restyles it.

## Not yet

Setting the range from the page, reading start and end as separate members in the host (a composed component's members
cannot be read by its host, hybriel#87), a second picker on one page.