TimeRangePicker

The TimeRangePicker organism follows the Curva & Concreto doctrine. It wraps two TimePicker molecules in a grid layout to facilitate start and end time selection while natively enforcing dynamic minimum and maximum bounds between the inputs.

Specimen

Usage

<script>
  import { TimeRangePicker } from 'cobogo';

  let start = '09:00';
  let end = '17:00';
</script>

<TimeRangePicker bind:start bind:end />

Dynamic Constraints

The TimeRangePicker intrinsically limits choices to prevent illogical time ranges. If a start time is selected, the end time’s internal min attribute is set to that start time. If an end time is selected, the start time’s max is restricted.

You can also pass global min and max limits:

<TimeRangePicker bind:start bind:end min="08:00" max="18:00" />

Integration with FormField

Like all form inputs in COBOGÓ, TimeRangePicker integrates seamlessly with the FormField wrapper. When placed inside a FormField, the TimeRangePicker automatically inherits the wrapper’s id (appending -start and -end suffixes), aria-describedby, and invalid validation state.

<FormField label="Meeting Time" id="meeting" invalid>
  <TimeRangePicker bind:start bind:end />
  <div slot="message">The selected time range is invalid.</div>
</FormField>

Props