Files
Htmx/Htmx.ApiDemo/Templates/Components/TimePicker.htmx
T

29 lines
1.2 KiB
Plaintext

<div class="timepicker-root flex flex-col gap-1.5" data-use12h="$$Use12h$$" id="tp-$$UniqueId$$">
$$Label$$
<div class="flex items-center gap-1">
<!-- Hour -->
<input type="number" min="$$HourMin$$" max="$$HourMax$$" step="1"
class="timepicker-hour h-10 w-16 rounded-md border border-input bg-background px-2 text-center text-sm
ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
focus-visible:ring-offset-2"
value="$$DefaultHour$$" />
<span class="text-sm font-bold text-foreground">:</span>
<!-- Minute -->
<input type="number" min="0" max="59" step="1"
class="timepicker-minute h-10 w-16 rounded-md border border-input bg-background px-2 text-center text-sm
ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
focus-visible:ring-offset-2"
value="$$DefaultMinute$$" />
<!-- AM/PM toggle (only rendered when use12h=true) -->
$$AmPmToggle$$
<!-- Hidden input that stores HH:MM value -->
<input type="hidden" name="$$Name$$" class="timepicker-hidden" value="$$DefaultValue$$" />
</div>
$$Description$$
</div>