TimePicker

NOTE: Introduced feature in v0.4.10.

TimePicker is a Widget that displays a set of hour, minute, second clock scrollable areas that a user can select from.

<script>
    import {TimePicker} from "@kahi-ui/framework";

    const value = "13:30:15";
</script>

<TimePicker palette="accent" {value} />

Imports

<script>
    import {TimePicker} from "@kahi-ui/framework";
</script>

Now

You can enable the displaying of a "NOW" button to allow the user to set the picker to the current time, via the now property.

<script>
    import {TimePicker} from "@kahi-ui/framework";

    const value = "13:30:15";
</script>

<TimePicker palette="accent" {value} now />

Auto Scroll

WARNING: This feature can cause performance degradation in when mounted.

You can enable auto scrolling to the currently set value when TimePicker is mounted, via the scroll property.

<script>
    import {TimePicker} from "@kahi-ui/framework";

    const value = "13:30:15";
</script>

<TimePicker palette="accent" {value} scroll />

12 Hour

NOTE: By default, this value respects the user default if available.

You can have the hours render as 12-hour time (1...12 AM/PM) instead of 24-hour time (0...23) via the hour_12 property.

<script>
    import {TimePicker} from "@kahi-ui/framework";

    const value = "13:30:15";
</script>

<TimePicker palette="accent" {value} hour_12 />

24 Hour

NOTE: By default, this value respects the user default if available.

You can have the hours render as 24-hour time (0...23) instead of 12-hour time (1...12 AM/PM) via the hour_12 property.

<script>
    import {TimePicker} from "@kahi-ui/framework";

    const value = "13:30:15";
</script>

<TimePicker palette="accent" hour_12={false} {value} />

Disabled

You can disable all interactivity via the disabled property.

<script>
    import {TimePicker} from "@kahi-ui/framework";

    const value = "13:30:15";
</script>

<TimePicker palette="accent" {value} disabled />

Disabled Timestamps

NOTE: Introduced feature in v0.6.0.

You can disable specific timestamps from being selected via the disabled property.

<script>
    import {TimePicker} from "@kahi-ui/framework";

    const value = "13:30:15";

    const disabled = ["11:00:00", "15:00:00"];
</script>

<TimePicker palette="accent" {disabled} {value} />

Highlight

NOTE: By default, the current time is used.

WARNING: This feature was changed to accept string[] instead of string in v0.6.0.

You can select a specific timestamp to be highlighted as outlines via the highlight property.

<script>
    import {TimePicker} from "@kahi-ui/framework";

    const value = "13:30:15";

    const highlight = ["15:00:00"];
</script>

<TimePicker palette="accent" {highlight} {value} />

Maximum + Minimum

You can set maximum and minimum range of selectable times via the max / min properties.

<script>
    import {TimePicker} from "@kahi-ui/framework";

    const value = "13:30:15";

    const max = "15:45:30";
    const min = "11:15:00";
</script>

<TimePicker palette="accent" {max} {min} {value} />

Custom Format

You can customize how the hour, minute, second components of the available timestamps is displayed via the hour, minute, and second properties respectively.

<script>
    import {TimePicker} from "@kahi-ui/framework";

    const value = "13:30:15";
</script>

<TimePicker
    palette="accent"
    hour="2-digit"
    minute="2-digit"
    second="2-digit"
    {value}
    hour_12
/>

Sizing

You can alter the overall spacing / sizing look and feel via the sizing property.

<script>
    import {
        Stack,
        Text,
        TimePicker,
    } from "@kahi-ui/framework";

    const value = "13:30:15";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    alignment_y="top"
    variation="wrap"
>
    <div>
        <Text is="strong">DEFAULT</Text>

        <TimePicker palette="accent" {value} />
    </div>

    <div>
        <Text is="strong">NANO</Text>

        <TimePicker
            palette="accent"
            sizing="nano"
            {value}
        />
    </div>

    <div>
        <Text is="strong">TINY</Text>

        <TimePicker
            palette="accent"
            sizing="tiny"
            {value}
        />
    </div>

    <div>
        <Text is="strong">SMALL</Text>

        <TimePicker
            palette="accent"
            sizing="small"
            {value}
        />
    </div>

    <div>
        <Text is="strong">MEDIUM</Text>

        <TimePicker
            palette="accent"
            sizing="medium"
            {value}
        />
    </div>

    <div>
        <Text is="strong">LARGE</Text>

        <TimePicker
            palette="accent"
            sizing="large"
            {value}
        />
    </div>

    <div>
        <Text is="strong">HUGE</Text>

        <TimePicker
            palette="accent"
            sizing="huge"
            {value}
        />
    </div>

    <div>
        <Text is="strong">MASSIVE</Text>

        <TimePicker
            palette="accent"
            sizing="massive"
            {value}
        />
    </div>
</Stack.Container>