components

1.6 KB

1. # Date range picker
3. HTML has no date range field. This is one text field for a period: click it, a month opens under it; click a
4. day for the start, click another for the end. The start and end are marked, the days between are highlighted.
5. The value is `YYYY-MM-DD – YYYY-MM-DD` (start – end). If the second day is before the first, they swap.
6. Typing works too (`2028-02-01 – 2028-02-29`); text that is not two real days marks the field (`aria-invalid="true"`).
7. Escape, Enter, or focusing the field again while only the start is picked drops that start and keeps the old range.
8. Live demo: https://components.hybriel.worldapi.org/range-picker
10. Pure Hybriel: one file, no JavaScript file. The browser's today and language are read when the field gets focus.
12. ## Use it in an app
14. Copy `components/range-picker/range-picker.hl` (optionally `shared/tokens.hl` for the app's own accent; it carries its own `Style`), then:
16. ```
17. import RangePicker from './range-picker.hl'
19. View {
20. form { method = "get" action = "/search"
21. RangePicker { }
22. }
23. }
24. ```
26. - The field is named `range` (member `name`); it posts as `range=YYYY-MM-DD – YYYY-MM-DD`.
27. - Do not wrap the picker in a `<label>`.
28. - One per page (a composed component's members are the page's state).
29. - 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.
31. ## Not yet
33. Setting the range from the page, reading start and end as separate members in the host (a composed component's members
34. cannot be read by its host, hybriel#87), a second picker on one page.