MonthPicker

NOTE: Introduced feature in v0.4.10.

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

MonthPicker is a Widget that displays a fiscal quaterly grid of months that a user can select from.

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

    const timestamp = "2021-01-01";
    const value = ["2021-06-01"];
</script>

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

Imports

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

Disabled

You can disable all interactivity via the disabled property.

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

    const timestamp = "2021-01-01";
</script>

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

Disabled Months

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

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

    const timestamp = "2021-01-01";

    const disabled = ["2021-06-01", "2021-12-01"];
</script>

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

Multiple

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

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

    const timestamp = "2021-01-01";
    const value = ["2021-06-01", "2021-12-01"];
</script>

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

Once

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

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

    const timestamp = "2021-01-01";
    const value = ["2021-06-01"];
</script>

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

Readonly

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

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

    const timestamp = "2021-01-01";
</script>

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

Highlight

NOTE: By default, the current month is used.

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

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

    const timestamp = "2021-01-01";

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

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

Maximum + Minimum

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

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

    const timestamp = "2021-01-01";

    const max = "2021-07-01";
    const min = "2021-05-01";
</script>

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

Custom Format

You can customize how the month component of the available timestamps is displayed via the month property.

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

    const timestamp = "2021-01-01";
</script>

<MonthPicker
    palette="accent"
    month="long"
    width="content-max"
    {timestamp}
/>

Sizing

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

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

    const timestamp = "2021-01-01";
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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