DayPicker

NOTE: Introduced feature in v0.4.10.

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

DayPicker is a Widget that displays a calendar-style grid of days that a user can select from.

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

    const timestamp = "2021-11-10";
    const value = ["2021-11-05"];
</script>

<DayPicker
    palette="accent"
    width="content-max"
    {timestamp}
    {value}
/>

Imports

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

Disabled

You can disable all interactivity via the disabled property.

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

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

<DayPicker
    palette="accent"
    width="content-max"
    {timestamp}
    disabled
/>

Disabled Days

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

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

    const timestamp = "2021-11-10";

    const disabled = ["2021-11-05", "2021-11-19"];
</script>

<DayPicker
    palette="accent"
    width="content-max"
    {disabled}
    {timestamp}
/>

Multiple

You can allow for multiple days to be selected via the multiple property.

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

    const timestamp = "2021-11-10";
    const value = ["2021-11-05", "2021-11-19"];
</script>

<DayPicker
    palette="accent"
    width="content-max"
    {timestamp}
    {value}
    multiple
/>

Once

You can disable selected days from being unselected via the once property.

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

    const timestamp = "2021-11-10";
    const value = ["2021-11-05"];
</script>

<DayPicker
    palette="accent"
    width="content-max"
    {timestamp}
    {value}
    once
/>

Readonly

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

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

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

<DayPicker
    palette="accent"
    width="content-max"
    {timestamp}
    readonly
/>

Highlight

NOTE: By default, the current day is used.

You can select a specific set of days to be highlighted as outlines via the highlight property.

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

    const timestamp = "2021-11-10";

    const highlight = [
        "2021-11-11",
        "2021-11-12",
        "2021-11-13",
    ];
</script>

<DayPicker
    palette="accent"
    width="content-max"
    {highlight}
    {timestamp}
/>

Maximum + Minimum

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

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

    const timestamp = "2021-11-10";

    const max = "2021-11-19";
    const min = "2021-11-05";
</script>

<DayPicker
    palette="accent"
    width="content-max"
    {max}
    {min}
    {timestamp}
/>

Custom Format

You can customize how the day component of the available timestamps is displayed via the day and weekday properties respectively.

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

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

<DayPicker
    palette="accent"
    day="numeric"
    weekday="long"
    width="content-max"
    {timestamp}
/>

Sizing

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

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

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

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

        <DayPicker
            palette="accent"
            width="content-max"
            {timestamp}
        />
    </div>

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

        <DayPicker
            palette="accent"
            sizing="nano"
            width="content-max"
            {timestamp}
        />
    </div>

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

        <DayPicker
            palette="accent"
            sizing="tiny"
            width="content-max"
            {timestamp}
        />
    </div>

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

        <DayPicker
            palette="accent"
            sizing="small"
            width="content-max"
            {timestamp}
        />
    </div>

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

        <DayPicker
            palette="accent"
            sizing="medium"
            width="content-max"
            {timestamp}
        />
    </div>

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

        <DayPicker
            palette="accent"
            sizing="large"
            width="content-max"
            {timestamp}
        />
    </div>

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

        <DayPicker
            palette="accent"
            sizing="huge"
            width="content-max"
            {timestamp}
        />
    </div>

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

        <DayPicker
            palette="accent"
            sizing="massive"
            width="content-max"
            {timestamp}
        />
    </div>
</Stack.Container>