DatePicker

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

<DatePicker onChange={(_date, dateString) => console.log(dateString)} />

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

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

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

<DatePicker multiple style="width: 240px" />

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

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

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

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

<DatePicker onChange={console.log} style="width: 260px" type="dateRange" />

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

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

<DatePicker onChange={console.log} style="width: 400px; margin-bottom: 8px" type="dateTimeRange" />
<DatePicker {defaultPickerValue} onChange={console.log} style="width: 400px" type="dateTimeRange" />

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

<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>

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

<DatePicker style="width: 400px" syncSwitchMonth type="dateTimeRange" />

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

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

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

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

    const 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>

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

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

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

<DatePicker style="width: 140px" type="month" {value} />

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

<DatePicker style="width: 200px" type="monthRange" />

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

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

<DatePicker style="width: 140px" type="year" {value} />

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

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

<DatePicker needConfirm {onCancel} {onChange} {onConfirm} type="dateTime" />

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

    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>

<DatePicker presetPosition="left" {presets} type="dateTime" />

<script lang="ts">
    import { IconBulb } from '@fibrae/semi-icons-svelte';
    import { DatePicker, Space, Tabs, TypographyText, type DatePickerValueType, type PlainTab } from '@fibrae/semi-ui-svelte';

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

    const tabList: PlainTab[] = [
        { itemKey: '1', tab: 'UED 排期' },
        { itemKey: '2', tab: '测试排期' },
    ];

    let activeTab = $state('1');
    let date = $state<DatePickerValueType | null>();
    const disabledDate = $derived(activeTab === '1' ? uedDisabledDate : testDisabledDate);
</script>

{#snippet tabs(padding: string)}
    <Tabs bind:activeKey={activeTab} onChange={() => (date = null)} size="small" style={`padding: ${padding}`} {tabList} />
{/snippet}

{#snippet notice(padding: string, text: string, linkText: string)}
    <Space style={`padding: ${padding}`}>
        <IconBulb style="color: var(--semi-amber-5)" />
        <TypographyText strong style="color: var(--semi-color-text-2)">{text}</TypographyText>
        <TypographyText link={{ href: 'https://semi.design/', target: '_blank' }}>{linkText}</TypographyText>
    </Space>
{/snippet}

<div>
    <DatePicker bind:value={date} {disabledDate} dropdownClassName="components-datepicker-demo-slot" placeholder="请选择排期">
        {#snippet topSlot()}{@render tabs('12px 20px 0')}{/snippet}
    </DatePicker>
    <br />
    <br />
    <DatePicker placeholder="请选择发版时间">
        {#snippet bottomSlot()}{@render notice('12px 20px', '定版前请阅读', '发版须知')}{/snippet}
    </DatePicker>
    <br />
    <br />
    <DatePicker placeholder="请选择年月" type="month">
        {#snippet bottomSlot()}{@render notice('12px 20px', '请阅读', '须知')}{/snippet}
    </DatePicker>
    <br />
    <br />
    <DatePicker density="compact" dropdownClassName="components-datepicker-demo-slot" placeholder="小尺寸">
        {#snippet topSlot()}{@render tabs('8px 12px 0')}{/snippet}
        {#snippet bottomSlot()}{@render notice('8px 12px', '定版前请阅读', '发版须知')}{/snippet}
    </DatePicker>
    <br />
    <br />
    <DatePicker placeholder="请选择时间范围" style="width: 400px" type="dateTimeRange">
        {#snippet bottomSlot()}{@render notice('12px 20px', '定版前请阅读', '发版须知')}{/snippet}
    </DatePicker>
    <br />
    <br />
</div>

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

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

<DatePicker disabled type="dateTime" {value} />

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

    const nextValidMonth = dateFns.addMonths(Date.now(), 1);

    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 = dateFns.setDate(dateFns.addMonths(Date.now(), 1), 28);
        return !!date && date.getTime() < deadDate.getTime();
    };
</script>

<div>
    <div>
        <h4>禁用时间：禁用今天下午5-6点</h4>
        <DatePicker {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} style="width: 400px" type="dateTimeRange" />
    </div>
</div>

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

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

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

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

    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>

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

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

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

<DatePicker format="yyyy年MM月dd日 HH:mm" type="dateTime" {value} />

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

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

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

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

    const formatToken = 'yyyy-MM-dd HH:mm:ss';
    let date = $state<DatePickerValueType | null>(null);

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

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

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

    const dateStyle = 'width: 100%; height: 100%; border: 1px solid var(--semi-color-primary); display: flex; justify-content: center; align-items: center';
</script>

<DatePicker>
    {#snippet date({ dayNumber })}
        {#if dayNumber === 1}
            <Tooltip>
                {#snippet content()}Always Day 1{/snippet}
                <div style={dateStyle}>{dayNumber}</div>
            </Tooltip>
        {:else}
            {dayNumber}
        {/if}
    {/snippet}
</DatePicker>

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

    const prefix = 'components-datepicker-demo';
    const dayStyle = 'display: flex; align-items: center; justify-content: center; width: 80%; height: 80%; border-radius: var(--semi-border-radius-circle)';
</script>

<DatePicker style="width: 260px" type="dateRange">
    {#snippet 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>
    {/snippet}
</DatePicker>

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

    let picker = $state<ReturnType<typeof DatePicker>>();

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

<Space align="start" vertical>
    <Space>
        <Button onclick={() => picker?.open()}>open</Button>
        <Button onclick={() => picker?.close()}>close</Button>
        <Button onclick={() => picker?.focus()}>focus</Button>
        <Button onclick={() => picker?.blur()}>blur</Button>
    </Space>
    <div>
        <DatePicker bind:this={picker} onClickOutSide={handleClickOutside} type="dateTime" />
    </div>
</Space>