时间选择器

<script lang="ts">
    import { TimePicker } from '@fibrae/semi-ui-svelte';
</script>

<TimePicker />

<script lang="ts">
    import { TimePicker } from '@fibrae/semi-ui-svelte';
</script>

<TimePicker scrollItemProps={{ mode: 'wheel', cycled: true }} />

<script lang="ts">
    import { TimePicker, type TimePickerBaseValueType } from '@fibrae/semi-ui-svelte';

    let value = $state<TimePickerBaseValueType | TimePickerBaseValueType[] | null>(null);
    const onChange = (time: unknown) => console.log(time);
</script>

<TimePicker bind:value {onChange} />

<script lang="ts">
    import { TimePicker } from '@fibrae/semi-ui-svelte';
</script>

<TimePicker format="HH:mm" value="10:24" />

<script lang="ts">
    import { Button, TimePicker } from '@fibrae/semi-ui-svelte';

    let open = $state(false);
    const closePanel = () => {
        open = false;
    };
    const onOpenChange = (value: boolean) => {
        console.log(value);
    };
    const logFooter = (text: string) => console.log(text);
</script>

<div>
    <TimePicker bind:open {onOpenChange}>
        {#snippet panelHeader()}Time Select{/snippet}
        {#snippet panelFooter()}
            <Button onclick={closePanel}>close</Button>
        {/snippet}
    </TimePicker>
    <br />
    <br />
    <TimePicker type="timeRange">
        {#snippet panelHeader({ index })}{index === 0 ? 'start header' : 'end header'}{/snippet}
        {#snippet panelFooter({ index })}
            {#if index === 0}
                <Button onclick={() => logFooter('start footer')}>start footer</Button>
            {:else}
                <Button onclick={() => logFooter('end footer')}>end footer</Button>
            {/if}
        {/snippet}
    </TimePicker>
</div>

<script lang="ts">
    import { TimePicker } from '@fibrae/semi-ui-svelte';
</script>

<TimePicker disabled value="12:08:23" />

<script lang="ts">
    import { TimePicker } from '@fibrae/semi-ui-svelte';
</script>

<TimePicker minuteStep={15} secondStep={10} />

<script lang="ts">
    import { TimePicker } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <TimePicker use12Hours />
    <br />
    <br />
    <TimePicker format="a h:mm" use12Hours />
</div>

<script lang="ts">
    import { TimePicker } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <TimePicker type="timeRange" value={['10:23:15', '12:38:32']} />
    <br />
    <br />
    <TimePicker format="a h:mm" type="timeRange" use12Hours value={['上午 08:11', '下午 11:21']} />
</div>

<script lang="ts">
    import { TimePicker } from '@fibrae/semi-ui-svelte';

    const range = (length: number) => Array.from({ length }, (_, i) => i);

    // The right panel disables everything earlier than the start time picked on the left
    const disabledTime = (value: (Date | undefined)[], panelType: 'left' | 'right') => {
        const start = value[0];
        if (panelType === 'right' && start) {
            const h = start.getHours();
            const m = start.getMinutes();
            return {
                disabledHours: () => range(h),
                disabledMinutes: (hour: number) => (hour === h ? range(m) : []),
            };
        }
        return {};
    };
</script>

<TimePicker {disabledTime} type="timeRange" />

<script lang="ts">
    import * as dateFns from 'date-fns';
    import { IconTimePicker } from '@fibrae/semi-icons-svelte/lab';
    import { Tag, TimePicker, type TimePickerBaseValueType } from '@fibrae/semi-ui-svelte';

    const formatToken = 'HH:mm:ss';
    let time = $state<TimePickerBaseValueType | TimePickerBaseValueType[] | null>(new Date(2024, 0, 1, 10, 30, 0));
</script>

<TimePicker bind:value={time} format={formatToken}>
    {#snippet trigger({ placeholder })}
        <Tag color="cyan" shape="circle" size="large" style="padding: 12px; padding-right: 16px; font-size: 14px" type="light">
            {#snippet prefixIcon()}
                <IconTimePicker />
            {/snippet}
            {time instanceof Date ? dateFns.format(time, formatToken) : placeholder}
        </Tag>
    {/snippet}
</TimePicker>

<script lang="ts">
    import { ConfigProvider, Select, TimePicker } from '@fibrae/semi-ui-svelte';

    let timeZone = $state('GMT+08:00');
    const defaultTimestamp = 1581599305265;
    const gmtList: string[] = [];
    for (let hourOffset = -11; hourOffset <= 14; hourOffset++) {
        const prefix = hourOffset >= 0 ? '+' : '-';
        gmtList.push(`GMT${prefix}${String(Math.abs(hourOffset)).padStart(2, '0')}:00`);
    }
    const optionList = gmtList.map((gmt) => ({ value: gmt, label: gmt }));

    const onChange = (date: unknown, dateString: string | string[]) => console.log('DatePicker changed: ', date, dateString);
</script>

<ConfigProvider {timeZone}>
    <div style="width: 300px">
        <h5 style="margin: 10px">Select Time Zone:</h5>
        <Select aria-label="时区" onSelect={(value) => (timeZone = String(value))} {optionList} placeholder="请选择时区" showClear style="width: 300px" value={timeZone} />
        <br />
        <br />
        <h5 style="margin: 10px">TimePicker:</h5>
        <TimePicker {onChange} value={defaultTimestamp} />
    </div>
</ConfigProvider>