DatePicker

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

<template>
    <DatePicker @change="(_date, dateString) => console.log(dateString)" />
</template>

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

<template>
    <div>
        <DatePicker density="compact" type="dateTime" />
        <br />
        <br />
        <DatePicker density="compact" :style="{ width: '260px' }" type="dateRange" />
    </div>
</template>

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

<template>
    <DatePicker multiple :style="{ width: '240px' }" />
</template>

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

    const timePickerOpts: DatePickerTimePickerOpts = { scrollItemProps: { mode: 'wheel', cycled: true } };
</script>

<template>
    <h4>默认日期与时间选择</h4>
    <DatePicker type="dateTime" />
    <br />
    <br />
    <h4>开启时间列表无限循环</h4>
    <DatePicker :timePickerOpts="timePickerOpts" type="dateTime" />
</template>

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

<template>
    <DatePicker :style="{ width: '260px' }" type="dateRange" @change="console.log" />
</template>

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

    const defaultPickerValue = [new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')];
</script>

<template>
    <DatePicker :style="{ width: '400px', marginBottom: '8px' }" type="dateTimeRange" @change="console.log" />
    <DatePicker :defaultPickerValue="defaultPickerValue" :style="{ width: '400px' }" type="dateTimeRange" @change="console.log" />
</template>

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

<template>
    <div>
        <DatePicker insetInput type="date" />
        <br />
        <br />
        <DatePicker insetInput type="dateTime" />
        <br />
        <br />
        <DatePicker insetInput :style="{ width: '260px' }" type="dateRange" />
        <br />
        <br />
        <DatePicker insetInput :style="{ width: '400px' }" type="dateTimeRange" />
        <br />
        <br />
        <DatePicker insetInput placeholder="请选择年月" :style="{ width: '140px' }" type="month" />
        <br />
        <br />
        <DatePicker insetInput placeholder="请选择年月范围" :style="{ width: '200px' }" type="monthRange" />
        <br />
        <br />
        <DatePicker insetInput position="bottomLeft" type="date" />
        <br />
        <br />
        <DatePicker format="yyyy-MM-dd HH:mm" insetInput type="dateTime" />
    </div>
</template>

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

<template>
    <DatePicker :style="{ width: '400px' }" syncSwitchMonth type="dateTimeRange" />
</template>

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

    const onPanelChange = (date: Date | Date[], dateString: string | string[]) => console.log(date, dateString);
</script>

<template>
    <DatePicker :style="{ width: '400px' }" syncSwitchMonth type="dateTimeRange" @panelChange="onPanelChange" />
</template>

<script setup lang="ts">
    import * as dateFns from 'date-fns';
    import { DatePicker } from '@fibrous/semi-ui-vue';

    function handleChange(date: Date | Date[] | undefined) {
        console.log('date changed', date);
    }

    const startOfWeek = (date: Date) => dateFns.startOfWeek(date, { weekStartsOn: 1 });
    const endOfWeek = (date: Date) => dateFns.endOfWeek(date, { weekStartsOn: 1 });
    const endOfNextWeek = (date: Date) => dateFns.add(endOfWeek(date), { days: 7 });
    const sixDaysLater = (date: Date) => dateFns.add(date, { days: 6 });
</script>

<template>
    <div>
        <h4>选择自然周</h4>
        <DatePicker :endDateOffset="endOfWeek" :startDateOffset="startOfWeek" :style="{ width: '260px' }" type="dateRange" :weekStartsOn="1" @change="handleChange" />
        <br />
        <br />
        <h4>选择双周</h4>
        <DatePicker :endDateOffset="endOfNextWeek" :startDateOffset="startOfWeek" :style="{ width: '260px' }" type="dateRange" :weekStartsOn="1" @change="handleChange" />
        <br />
        <br />
        <h4>选择当前日和后6日</h4>
        <DatePicker :endDateOffset="sixDaysLater" :style="{ width: '260px' }" type="dateRange" :weekStartsOn="1" @change="handleChange" />
        <br />
        <br />
    </div>
</template>

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

    const defaultValue = new Date(2024, 4, 6, 10, 30, 0);
</script>

<template>
    <DatePicker :defaultValue="defaultValue" :style="{ width: '140px' }" type="month" />
</template>

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

<template>
    <DatePicker :style="{ width: '200px' }" type="monthRange" />
</template>

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

    const defaultValue = new Date(2024, 4, 6, 10, 30, 0);
</script>

<template>
    <DatePicker :defaultValue="defaultValue" :style="{ width: '140px' }" type="year" />
</template>

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

    const onConfirm = (...args: DatePickerEmits['confirm']) => {
        console.log('Confirmed: ', ...args);
    };
    const onCancel = (...args: DatePickerEmits['cancel']) => {
        console.log('Canceled: ', ...args);
    };
    const onChange = (...args: DatePickerEmits['change']) => {
        console.log('Changed: ', ...args);
    };
</script>

<template>
    <DatePicker needConfirm type="dateTime" @cancel="onCancel" @change="onChange" @confirm="onConfirm" />
</template>

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

    const presets: DatePickerPresetsType = [
        {
            text: 'Today',
            start: () => new Date(),
            end: () => new Date(),
        },
        () => ({
            text: 'Tomorrow',
            start: new Date(new Date().valueOf() + 1000 * 3600 * 24),
            end: new Date(new Date().valueOf() + 1000 * 3600 * 24),
        }),
    ];
</script>

<template>
    <DatePicker presetPosition="left" :presets="presets" type="dateTime" />
</template>

<script setup lang="ts">
    import { computed, ref } from 'vue';
    import { IconBulb } from '@fibrous/semi-icons-vue';
    import { DatePicker, Space, TabPane, Tabs, Typography, type DatePickerValueType } from '@fibrous/semi-ui-vue';

    const { Text } = Typography;

    const uedDisabledDate = (currentDate?: Date) => !!currentDate && currentDate.getDate() > 10 && currentDate.getDate() < 15;
    const testDisabledDate = (currentDate?: Date) => !!currentDate && currentDate.getDate() > 15 && currentDate.getDate() < 25;

    const activeTab = ref('1');
    const date = ref<DatePickerValueType>();
    const disabledDate = computed(() => (activeTab.value === '1' ? uedDisabledDate : testDisabledDate));
</script>

<template>
    <div>
        <DatePicker v-model="date" :disabledDate="disabledDate" dropdownClassName="components-datepicker-demo-slot" placeholder="请选择排期">
            <template #topSlot>
                <Tabs v-model:activeKey="activeTab" size="small" :style="{ padding: '12px 20px 0' }" @change="date = undefined">
                    <TabPane itemKey="1">
                        <template #tab>UED 排期</template>
                    </TabPane>
                    <TabPane itemKey="2">
                        <template #tab>测试排期</template>
                    </TabPane>
                </Tabs>
            </template>
        </DatePicker>
        <br />
        <br />
        <DatePicker placeholder="请选择发版时间">
            <template #bottomSlot>
                <Space :style="{ padding: '12px 20px' }">
                    <IconBulb :style="{ color: 'var(--semi-amber-5)' }" />
                    <Text strong :style="{ color: 'var(--semi-color-text-2)' }">定版前请阅读</Text>
                    <Text :link="{ href: 'https://semi.design/', target: '_blank' }">发版须知</Text>
                </Space>
            </template>
        </DatePicker>
        <br />
        <br />
        <DatePicker placeholder="请选择年月" type="month">
            <template #bottomSlot>
                <Space :style="{ padding: '12px 20px' }">
                    <IconBulb :style="{ color: 'var(--semi-amber-5)' }" />
                    <Text strong :style="{ color: 'var(--semi-color-text-2)' }">请阅读</Text>
                    <Text :link="{ href: 'https://semi.design/', target: '_blank' }">须知</Text>
                </Space>
            </template>
        </DatePicker>
        <br />
        <br />
        <DatePicker density="compact" dropdownClassName="components-datepicker-demo-slot" placeholder="小尺寸">
            <template #topSlot>
                <Tabs v-model:activeKey="activeTab" size="small" :style="{ padding: '8px 12px 0' }" @change="date = undefined">
                    <TabPane itemKey="1">
                        <template #tab>UED 排期</template>
                    </TabPane>
                    <TabPane itemKey="2">
                        <template #tab>测试排期</template>
                    </TabPane>
                </Tabs>
            </template>
            <template #bottomSlot>
                <Space :style="{ padding: '8px 12px' }">
                    <IconBulb :style="{ color: 'var(--semi-amber-5)' }" />
                    <Text strong :style="{ color: 'var(--semi-color-text-2)' }">定版前请阅读</Text>
                    <Text :link="{ href: 'https://semi.design/', target: '_blank' }">发版须知</Text>
                </Space>
            </template>
        </DatePicker>
        <br />
        <br />
        <DatePicker placeholder="请选择时间范围" :style="{ width: '400px' }" type="dateTimeRange">
            <template #bottomSlot>
                <Space :style="{ padding: '12px 20px' }">
                    <IconBulb :style="{ color: 'var(--semi-amber-5)' }" />
                    <Text strong :style="{ color: 'var(--semi-color-text-2)' }">定版前请阅读</Text>
                    <Text :link="{ href: 'https://semi.design/', target: '_blank' }">发版须知</Text>
                </Space>
            </template>
        </DatePicker>
        <br />
        <br />
    </div>
</template>

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

    const defaultValue = new Date(2024, 4, 6, 10, 30, 0);
</script>

<template>
    <DatePicker :defaultValue="defaultValue" disabled type="dateTime" />
</template>

<script setup lang="ts">
    import * as dateFns from 'date-fns';
    import { range } from 'es-toolkit';
    import { DatePicker, type DatePickerDisabledDateType, type DatePickerDisabledTimeType } from '@fibrous/semi-ui-vue';

    const nextValidMonth = new Date();
    nextValidMonth.setMonth((nextValidMonth.getMonth() + 1) % 12);

    const disabledTime: DatePickerDisabledTimeType = (date) =>
        // With type dateTime, date is a single Date
        dateFns.isToday(date as Date)
            ? {
                  disabledHours: () => [17, 18],
                  disabledMinutes: (hour) => (19 === hour ? range(0, 10, 1) : []),
                  disabledSeconds: (hour, minute) => (hour === 20 && minute === 20 ? range(0, 20, 1) : []),
              }
            : {};

    const disabledTime2: DatePickerDisabledTimeType = (_date, panelType) => (panelType === 'left' ? { disabledHours: () => [17, 18] } : { disabledHours: () => [12, 13, 14, 15, 16, 17, 18] });

    const disabledDate: DatePickerDisabledDateType = (date) => {
        const deadDate = new Date();
        const month = deadDate.getMonth();
        deadDate.setDate(28);
        deadDate.setMonth((month + 1) % 12);
        return !!date && date.getTime() < deadDate.getTime();
    };
</script>

<template>
    <div>
        <div>
            <h4>禁用时间：禁用今天下午5-6点</h4>
            <DatePicker :disabledTime="disabledTime" :hideDisabledOptions="false" type="dateTime" />
        </div>
        <div>
            <h4>禁用时间：两个面板禁用不同时间</h4>
            <DatePicker :disabledTime="disabledTime2" :hideDisabledOptions="false" :style="{ width: '400px' }" type="dateTimeRange" />
        </div>
        <div>
            <h4>禁用日期：禁用下个月28号之前的所有日期</h4>
            <DatePicker :defaultPickerValue="nextValidMonth" :disabledDate="disabledDate" :style="{ width: '400px' }" type="dateTimeRange" />
        </div>
    </div>
</template>

<script setup lang="ts">
    import * as dateFns from 'date-fns';
    import { DatePicker, type DatePickerDisabledDateType } from '@fibrous/semi-ui-vue';

    const disabledDate: DatePickerDisabledDateType = (date, options) => {
        if (!date || !options?.rangeStart) {
            return false;
        }
        return dateFns.isBefore(date, dateFns.parseISO(options.rangeStart));
    };
</script>

<template>
    <div>
        <h4>动态禁用日期：禁止选择之前的日期</h4>
        <DatePicker :disabledDate="disabledDate" :style="{ width: '260px' }" type="dateRange" />
    </div>
</template>

<script setup lang="ts">
    import * as dateFns from 'date-fns';
    import { DatePicker, type DatePickerDisabledDateType } from '@fibrous/semi-ui-vue';

    const today = new Date();

    const disabledDate: DatePickerDisabledDateType = (date, options) => {
        if (!date) {
            return false;
        }
        const rangeInputFocus = options?.rangeInputFocus;
        const baseDate = dateFns.set(today, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 });
        if (rangeInputFocus === 'rangeStart') {
            return dateFns.subDays(baseDate, 2) <= date && date <= dateFns.addDays(baseDate, 2);
        } else if (rangeInputFocus === 'rangeEnd') {
            return dateFns.subDays(baseDate, 3) <= date && date <= dateFns.addDays(baseDate, 3);
        }
        return false;
    };
</script>

<template>
    <div>
        <h4>开始日期禁用今天前2日和后2日，结束日期禁用今天前3天和后3天</h4>
        <DatePicker :defaultPickerValue="today" :disabledDate="disabledDate" :motion="false" type="dateRange" />
    </div>
</template>

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

    const defaultValue = new Date(2024, 4, 6, 10, 30, 0);
</script>

<template>
    <DatePicker :defaultValue="defaultValue" format="yyyy年MM月dd日 HH:mm" type="dateTime" />
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import * as dateFns from 'date-fns';
    import { IconChevronDown, IconClose } from '@fibrous/semi-icons-vue';
    import { Button, ButtonGroup, DatePicker, type DatePickerValueType } from '@fibrous/semi-ui-vue';

    const formatToken = 'yyyy-MM-dd';
    const date = ref<DatePickerValueType | null | undefined>(new Date(2024, 4, 6, 10, 30, 0));
</script>

<template>
    <DatePicker v-model="date" :format="formatToken">
        <template #trigger="{ value, placeholder }">
            <!-- The clear button is a sibling of the trigger button: buttons cannot nest -->
            <ButtonGroup theme="light">
                <Button iconPosition="right">
                    <template #icon>
                        <IconChevronDown />
                    </template>
                    {{ value.length ? dateFns.format(value[0], formatToken) : placeholder }}
                </Button>
                <Button v-if="date" aria-label="清除" @click.stop="date = null">
                    <template #icon>
                        <IconClose />
                    </template>
                </Button>
            </ButtonGroup>
        </template>
    </DatePicker>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import * as dateFns from 'date-fns';
    import { IconChevronDown, IconClose } from '@fibrous/semi-icons-vue';
    import { Button, ButtonGroup, DatePicker, type DatePickerValueType } from '@fibrous/semi-ui-vue';

    const formatToken = 'yyyy-MM-dd HH:mm:ss';
    const date = ref<DatePickerValueType>();

    function onChange(value: Date | Date[] | undefined) {
        console.log(value);
    }
</script>

<template>
    <DatePicker v-model="date" type="dateTimeRange" @change="onChange">
        <template #trigger="{ value }">
            <!-- The clear button is a sibling of the trigger button: buttons cannot nest -->
            <ButtonGroup theme="light">
                <Button iconPosition="right">
                    <template #icon>
                        <IconChevronDown />
                    </template>
                    {{ value.length ? `${dateFns.format(value[0], formatToken)} ~ ${dateFns.format(value[1], formatToken)}` : '请选择日期时间范围' }}
                </Button>
                <Button v-if="value.length" aria-label="清除" @click.stop="date = undefined">
                    <template #icon>
                        <IconClose />
                    </template>
                </Button>
            </ButtonGroup>
        </template>
    </DatePicker>
</template>

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

    const dateStyle = {
        width: '100%',
        height: '100%',
        border: '1px solid var(--semi-color-primary)',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    };
</script>

<template>
    <DatePicker>
        <template #date="{ dayNumber }">
            <Tooltip v-if="dayNumber === 1">
                <div :style="dateStyle">{{ dayNumber }}</div>
                <template #content>Always Day 1</template>
            </Tooltip>
            <template v-else>{{ dayNumber }}</template>
        </template>
    </DatePicker>
</template>

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

    const prefix = 'components-datepicker-demo';
    const dayStyle = {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '80%',
        height: '80%',
        borderRadius: 'var(--semi-border-radius-circle)',
    };
</script>

<template>
    <DatePicker :style="{ width: '260px' }" type="dateRange">
        <template #fullDate="{ dayNumber, dayStatus }">
            <div
                :class="{
                    [`${prefix}-day-inrange`]: dayStatus.isInRange,
                    [`${prefix}-day-hover`]: dayStatus.isHover,
                    [`${prefix}-day-selected`]: dayStatus.isSelected,
                    [`${prefix}-day-selected-start`]: dayStatus.isSelectedStart,
                    [`${prefix}-day-selected-end`]: dayStatus.isSelectedEnd,
                }"
                :style="dayStyle"
            >
                {{ dayNumber }}
            </div>
        </template>
    </DatePicker>
</template>

<script setup lang="ts">
    import { useTemplateRef } from 'vue';
    import { Button, DatePicker, Space, type DatePickerHandle } from '@fibrous/semi-ui-vue';

    const picker = useTemplateRef<DatePickerHandle>('picker');

    const handleClickOutside = () => {
        console.log('click outside');
    };
</script>

<template>
    <Space align="start" vertical>
        <Space>
            <Button @click="picker?.open()">open</Button>
            <Button @click="picker?.close()">close</Button>
            <Button @click="picker?.focus()">focus</Button>
            <Button @click="picker?.blur()">blur</Button>
        </Space>
        <div>
            <DatePicker ref="picker" type="dateTime" @clickOutSide="handleClickOutside" />
        </div>
    </Space>
</template>