Dates@knitui/dates
TimeValue
TimeValue is the time layer's simplest leaf: a pure formatter that renders a time value (an HH:mm[:ss] string or a Date) as text. format switches between 24h (13:30) and 12h (1:30 PM); withSeconds appends :ss; amPmLabels swaps the AM/PM words. The output is built from numeric clock components, so it is locale-independent. It renders through the kit Text, so it accepts the usual Text styling / theme props and forwards its ref.
import { TimeValue } from "@knitui/dates";Playground
Loading playground…
<TimeValue
value="13:30:00"
format="24h"
withSeconds={false}
/>Examples
Default
Default 24h formatting.
Loading example…
Twelve Hour
12h mode with AM/PM.
Loading example…
With Seconds
Seconds appended in both modes.
Loading example…
Custom Am Pm Labels
Localized AM/PM labels.
Loading example…
From Date
A Date value reads its wall-clock time.
Loading example…
Styled
Inherits Text styling / theme: as a real text node it accepts the kit's font props and recolors with the surrounding theme.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value required | string | Date | 13:30:00 | Time to format — an "HH:mm:ss" string or a Date. |
amPmLabels | TimePickerAmPmLabels | undefined | { am: 'AM', pm: 'PM' } | AM/PM labels for the `12h` mode. |
disabled system | boolean | undefined | — | Specifies the disabled state of the text view for testing purposes. |
format | TimePickerFormat | undefined24h · 12h | '24h' | Clock display mode. |
size system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined | — | |
theme system | ThemeName | null | undefined | — | Applies a theme to this element |
withSeconds | boolean | undefined | false | Display a seconds segment. |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<TamaguiElement> | undefined |
Plus 507 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.