A start time and an end time with the suggestions around the one being edited and how long the span is: what a
time sheet or a booking asks for. The fields are text inputs with a clock icon that take digits and lay them out
as HH:MM (930 becomes 09:30 when the field is left); under them a list shows the steps around the time of
the field in focus, each with its length from the start when the end is being edited (10:30 · 1 h 30 min), the
chosen one inverted; below, a Duration row and a note, such as the time zone and the step.
The keys are those of a combobox: ↑ and ↓ move the time one step, Enter completes what was typed, a click on a
suggestion picks it. The fields have the names (start_name, end_name) and hold HH:MM text, so a form with
phx-change hears them; the list and the length are drawn by the DevactionUI.TimeField hook from the pure
logic in clock.js. Every word is an attr: hours_label and minutes_label are patterns with %{count}
(%{count} h, %{count} min) that write both the suggestions and the duration.
Summary
Functions
Attributes
id(:string) (required)start_name(:string) (required) - the name of the start field.end_name(:string) (required) - the name of the end field.start_value(:string) - the start asHH:MM. Defaults to"09:00".end_value(:string) - the end asHH:MM. Defaults to"10:00".start_label(:string) (required) - the label of the start field, e.g.Start.end_label(:string) (required) - the label of the end field, e.g.End.list_label(:string) (required) - names the list of suggestions, e.g.Times.duration_label(:string) (required) - the row that says the length, e.g.Duration.hours_label(:string) (required) - writes a number of hours,%{count}filled in, e.g.%{count} h.minutes_label(:string) (required) - writes a number of minutes,%{count}filled in, e.g.%{count} min.step(:integer) - the minutes between two suggestions. Defaults to15.note(:string) - the line at the bottom, e.g.Zone: America/Bahia (UTC-3) · 15 min steps. Defaults tonil.disabled(:boolean) - Defaults tofalse.class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
icon- the clock icon of both fields; it gets 15px.