TimePicker

<script setup lang="ts">
    import { TimePicker } from '@fibrous/semi-ui-vue';
</script>

<template>
    <TimePicker />
</template>

<script setup lang="ts">
    import { TimePicker } from '@fibrous/semi-ui-vue';
</script>

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

<script setup lang="ts">
    import { ref } from 'vue';
    import { TimePicker } from '@fibrous/semi-ui-vue';

    const value = ref<Date | (Date | undefined)[] | null | undefined>(null);
    const onChange = (time: unknown) => console.log(time);
</script>

<template>
    <TimePicker v-model="value" @change="onChange" />
</template>

<script setup lang="ts">
    import { TimePicker } from '@fibrous/semi-ui-vue';
</script>

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

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, TimePicker } from '@fibrous/semi-ui-vue';

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

<template>
    <div>
        <TimePicker v-model:open="open" @openChange="onOpenChange">
            <template #panelHeader>Time Select</template>
            <template #panelFooter>
                <Button @click="closePanel">close</Button>
            </template>
        </TimePicker>
        <br />
        <br />
        <TimePicker type="timeRange">
            <template #panelHeader="{ index }">{{ index === 0 ? 'start header' : 'end header' }}</template>
            <template #panelFooter="{ index }">
                <Button v-if="index === 0" @click="logFooter('start footer')">start footer</Button>
                <Button v-else @click="logFooter('end footer')">end footer</Button>
            </template>
        </TimePicker>
    </div>
</template>

<script setup lang="ts">
    import { TimePicker } from '@fibrous/semi-ui-vue';
</script>

<template>
    <TimePicker defaultValue="12:08:23" disabled />
</template>

<script setup lang="ts">
    import { TimePicker } from '@fibrous/semi-ui-vue';
</script>

<template>
    <TimePicker :minuteStep="15" :secondStep="10" />
</template>

<script setup lang="ts">
    import { TimePicker } from '@fibrous/semi-ui-vue';
</script>

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

<script setup lang="ts">
    import { TimePicker } from '@fibrous/semi-ui-vue';
</script>

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

<script setup lang="ts">
    import { TimePicker } from '@fibrous/semi-ui-vue';

    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>

<template>
    <TimePicker :disabledTime="disabledTime" type="timeRange" />
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import * as dateFns from 'date-fns';
    import { IconTimePicker } from '@fibrous/semi-icons-vue/lab';
    import { Tag, TimePicker } from '@fibrous/semi-ui-vue';

    const formatToken = 'HH:mm:ss';
    const time = ref<Date | (Date | undefined)[] | undefined>(new Date(2024, 0, 1, 10, 30, 0));
</script>

<template>
    <TimePicker v-model="time" :format="formatToken">
        <template #trigger="{ placeholder }">
            <Tag color="cyan" shape="circle" size="large" :style="{ padding: '12px', paddingRight: '16px', fontSize: '14px' }" type="light">
                <template #prefixIcon>
                    <IconTimePicker />
                </template>
                {{ time instanceof Date ? dateFns.format(time, formatToken) : placeholder }}
            </Tag>
        </template>
    </TimePicker>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { ConfigProvider, Select, TimePicker } from '@fibrous/semi-ui-vue';

    const timeZone = ref('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 onChange = (date: unknown, dateString: string | string[]) => console.log('DatePicker changed: ', date, dateString);
</script>

<template>
    <ConfigProvider :timeZone="timeZone">
        <div :style="{ width: '300px' }">
            <h5 :style="{ margin: '10px' }">Select Time Zone:</h5>
            <Select aria-label="时区" :modelValue="timeZone" placeholder="请选择时区" showClear :style="{ width: '300px' }" @select="timeZone = String($event)">
                <Select.Option v-for="gmt in gmtList" :key="gmt" :value="gmt">{{ gmt }}</Select.Option>
            </Select>
            <br />
            <br />
            <h5 :style="{ margin: '10px' }">TimePicker:</h5>
            <TimePicker :defaultValue="defaultTimestamp" @change="onChange" />
        </div>
    </ConfigProvider>
</template>