components

1.6 KB

1. # Date picker
3. 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`.
4. Typing works too; a typed date that is not a real day marks the field (`aria-invalid="true"`). Escape, Enter or a click
5. outside closes the month; the arrows page through the months. One component gives you as many fields as you name, and each
6. posts in a form under its own name.
7. Live demo: https://components.hybriel.worldapi.org/date-picker
9. Pure Hybriel: one file, no JavaScript file. The browser's today and language are read when a field gets focus.
11. ## Use it in an app
13. Copy `components/date-picker/date-picker.hl` (optionally `shared/tokens.hl` for the app's own accent; it carries its own `Style`), then:
15. ```
16. import DatePicker from './date-picker.hl'
18. View {
19. form { method = "get" action = "/book"
20. DatePicker { names = "arrival,departure" }
21. }
22. }
23. ```
25. - `names` is a comma-separated list: one field per name (default: one field named `date`).
26. - Do not wrap the picker in a `<label>`; the field's `title` carries its name.
27. - Use ONE `DatePicker` per page (a composed component's members are the page's state) — give it all the fields of the page.
28. - 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.
30. ## Not yet
32. Setting a value from the page and reading it in the host (a composed component's members cannot be read by its host,
33. hybriel#87 — the value goes out through the form), a min/max date, a second `DatePicker` on the same page.