# Date picker

A date picker for input fields. Click a field: a month opens under it; click a day and the field shows it as `YYYY-MM-DD`.
Typing works too; a typed date that is not a real day marks the field (`aria-invalid="true"`). Escape, Enter or a click
outside closes the month; the arrows page through the months. One component gives you as many fields as you name, and each
posts in a form under its own name.
Live demo: https://components.hybriel.worldapi.org/date-picker

Pure Hybriel: one file, no JavaScript file. The browser's today and language are read when a field gets focus.

## Use it in an app

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

```
import DatePicker from './date-picker.hl'

View {
	form { method = "get"  action = "/book"
		DatePicker { names = "arrival,departure" }
	}
}
```

- `names` is a comma-separated list: one field per name (default: one field named `date`).
- Do not wrap the picker in a `<label>`; the field's `title` carries its name.
- Use ONE `DatePicker` per page (a composed component's members are the page's state) — give it all the fields of the page.
- 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 a value from the page and reading it in the host (a composed component's members cannot be read by its host,
hybriel#87 — the value goes out through the form), a min/max date, a second `DatePicker` on the same page.