DayStepper

NOTE: Introduced feature in v0.4.10.

WARNING: This feature received a breaking change in v0.6.0.

DayStepper is a Widget that lets users increment / decrement the currently provided day by a set number.

Imports

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

Disabled

You can disable all interactivity via the disabled property.

Readonly

You can disable interactivity without changing the visuals via the readonly property.

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

    const value = "2021-11-10";
</script>

<DayStepper palette="accent" {value} readonly />

Maximum + Minimum

You can set maximum and minimum range of steppable days via the max / min properties.

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

    const value = "2021-11-10";

    const max = "2021-11-13";
    const min = "2021-11-07";
</script>

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

Steps

WARNING: This feature was renamed from step to steps in v0.6.0.

You can control how many days the buttons increment / decrement via the steps property.

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

    const value = "2021-11-10";
</script>

<DayStepper palette="accent" steps={3} {value} />

Custom Format

You can customize how the day and month components of the current timestamp is displayed via the day, weekday, and month properties respectively.

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

    const value = "2021-11-10";
</script>

<DayStepper
    palette="accent"
    day="numeric"
    month="numeric"
    weekday="short"
    {value}
/>

Sizing

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

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

    const value = "2021-11-10";
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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