DatePicker

import { DatePicker } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    return <DatePicker onChange={(_date, dateString) => console.log(dateString)} />;
}

import { DatePicker } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    return (
        <div>
            <DatePicker type="dateTime" density="compact" />
            <br />
            <br />
            <DatePicker type="dateRange" density="compact" style={{ width: 260 }} />
        </div>
    );
}

import { DatePicker } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    return <DatePicker multiple style={{ width: 240 }} />;
}

import { DatePicker } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    return (
        <>
            <h4>默认日期与时间选择</h4>
            <DatePicker type="dateTime" />
            <br />
            <br />
            <h4>开启时间列表无限循环</h4>
            <DatePicker
                type="dateTime"
                timePickerOpts={{
                    scrollItemProps: { mode: 'wheel', cycled: true },
                }}
            />
        </>
    );
}

import { DatePicker } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    return <DatePicker type="dateRange" style={{ width: 260 }} onChange={console.log} />;
}

import { DatePicker } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    return (
        <>
            <DatePicker type="dateTimeRange" style={{ width: 400, marginBottom: 8 }} onChange={console.log} />
            <DatePicker type="dateTimeRange" style={{ width: 400 }} defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]} onChange={console.log} />
        </>
    );
}

import { DatePicker } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    return (
        <div>
            <DatePicker type="date" insetInput />
            <br />
            <br />
            <DatePicker type="dateTime" insetInput />
            <br />
            <br />
            <DatePicker type="dateRange" insetInput style={{ width: 260 }} />
            <br />
            <br />
            <DatePicker type="dateTimeRange" insetInput style={{ width: 400 }} />
            <br />
            <br />
            <DatePicker type="month" placeholder="请选择年月" insetInput style={{ width: 140 }} />
            <br />
            <br />
            <DatePicker type="monthRange" placeholder="请选择年月范围" insetInput style={{ width: 200 }} />
            <br />
            <br />
            <DatePicker type="date" position="bottomLeft" insetInput />
            <br />
            <br />
            <DatePicker type="dateTime" format="yyyy-MM-dd HH:mm" insetInput />
        </div>
    );
}

import { DatePicker } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    return <DatePicker syncSwitchMonth type="dateTimeRange" style={{ width: 400 }} />;
}

import { DatePicker } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    return <DatePicker syncSwitchMonth type="dateTimeRange" style={{ width: 400 }} onPanelChange={(date, dateString) => console.log(date, dateString)} />;
}

import * as dateFns from 'date-fns';
import { DatePicker } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    const handleChange = (date: Date | Date[]) => {
        console.log('date changed', date);
    };

    return (
        <div>
            <h4>选择自然周</h4>
            <DatePicker style={{ width: 260 }} type="dateRange" weekStartsOn={1} startDateOffset={(date) => dateFns.startOfWeek(date, { weekStartsOn: 1 })} endDateOffset={(date) => dateFns.endOfWeek(date, { weekStartsOn: 1 })} onChange={handleChange} />
            <br />
            <br />
            <h4>选择双周</h4>
            <DatePicker style={{ width: 260 }} type="dateRange" weekStartsOn={1} startDateOffset={(date) => dateFns.startOfWeek(date, { weekStartsOn: 1 })} endDateOffset={(date) => dateFns.add(dateFns.endOfWeek(date, { weekStartsOn: 1 }), { days: 7 })} onChange={handleChange} />
            <br />
            <br />
            <h4>选择当前日和后6日</h4>
            <DatePicker style={{ width: 260 }} type="dateRange" weekStartsOn={1} endDateOffset={(date) => dateFns.add(date, { days: 6 })} onChange={handleChange} />
            <br />
            <br />
        </div>
    );
}

import { DatePicker } from '@fibrous/semi-ui-react';

const defaultValue = new Date(2019, 6, 23, 12);

export default function DatePickerDemo() {
    return <DatePicker defaultValue={defaultValue} type="month" style={{ width: 140 }} />;
}

import { DatePicker } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    return <DatePicker type="monthRange" style={{ width: 200 }} />;
}

import { DatePicker } from '@fibrous/semi-ui-react';

const defaultValue = new Date(2019, 6, 23, 12);

export default function DatePickerDemo() {
    return <DatePicker defaultValue={defaultValue} type="year" style={{ width: 140 }} />;
}

import { DatePicker } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    return (
        <DatePicker
            type="dateTime"
            needConfirm
            onConfirm={(...args) => {
                console.log('Confirmed: ', ...args);
            }}
            onCancel={(...args) => {
                console.log('Canceled: ', ...args);
            }}
            onChange={(...args) => {
                console.log('Changed: ', ...args);
            }}
        />
    );
}

import { DatePicker } from '@fibrous/semi-ui-react';

const presets = [
    {
        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),
    }),
];

export default function DatePickerDemo() {
    return <DatePicker type="dateTime" presets={presets} presetPosition="left" />;
}

import { useState, type CSSProperties } from 'react';
import { IconBulb } from '@fibrous/semi-icons-react';
import { DatePicker, Typography, Tabs, TabPane, Space } from '@fibrous/semi-ui-react';

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;

interface SlotProps {
    style?: CSSProperties;
}

interface TopSlotProps extends SlotProps {
    activeKey: string;
    onChange: (activeKey: string) => void;
}

function TopSlot({ style, activeKey, onChange }: TopSlotProps) {
    return (
        <Tabs size="small" onChange={onChange} activeKey={activeKey} style={{ padding: '12px 20px 0', ...style }}>
            <TabPane tab="UED 排期" itemKey="1" />
            <TabPane tab="测试排期" itemKey="2" />
        </Tabs>
    );
}

function BottomSlot({ style }: SlotProps) {
    return (
        <Space style={{ padding: '12px 20px', ...style }}>
            <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>
    );
}

function MonthBottomSlot({ style }: SlotProps) {
    return (
        <Space style={{ padding: '12px 20px', ...style }}>
            <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>
    );
}

export default function DatePickerDemo() {
    const [activeTab, setActiveTab] = useState('1');
    const [date, setDate] = useState<Date | Date[]>();

    const handleTabChange = (tab: string) => {
        setActiveTab(tab);
        setDate(undefined);
    };

    const handleDateChange = (value: Date | Date[]) => {
        setDate(value);
    };

    const disabledDate = activeTab === '1' ? uedDisabledDate : testDisabledDate;

    return (
        <div>
            <DatePicker topSlot={<TopSlot activeKey={activeTab} onChange={handleTabChange} />} disabledDate={disabledDate} value={date} onChange={handleDateChange} dropdownClassName="components-datepicker-demo-slot" placeholder="请选择排期" />
            <br />
            <br />
            <DatePicker bottomSlot={<BottomSlot />} placeholder="请选择发版时间" />
            <br />
            <br />
            <DatePicker type="month" bottomSlot={<MonthBottomSlot />} placeholder="请选择年月" />
            <br />
            <br />
            <DatePicker topSlot={<TopSlot activeKey={activeTab} onChange={handleTabChange} style={{ padding: '8px 12px 0' }} />} bottomSlot={<BottomSlot style={{ padding: '8px 12px' }} />} density="compact" placeholder="小尺寸" dropdownClassName="components-datepicker-demo-slot" />
            <br />
            <br />
            <DatePicker type="dateTimeRange" bottomSlot={<BottomSlot />} style={{ width: 400 }} placeholder="请选择时间范围" />
            <br />
            <br />
        </div>
    );
}

import { DatePicker } from '@fibrous/semi-ui-react';

const defaultValue = new Date(2019, 6, 23, 12);

export default function DatePickerDemo() {
    return <DatePicker disabled type="dateTime" defaultValue={defaultValue} />;
}

import { useCallback } from 'react';
import * as dateFns from 'date-fns';
import { range } from 'es-toolkit';
import { DatePicker, type DatePickerDisabledDateType, type DatePickerDisabledTimeType } from '@fibrous/semi-ui-react';

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

export default function DatePickerDemo() {
    const disabledTime = useCallback<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 = useCallback<DatePickerDisabledTimeType>((_date, panelType) => {
        if (panelType === 'left') {
            return { disabledHours: () => [17, 18] };
        }
        return { disabledHours: () => [12, 13, 14, 15, 16, 17, 18] };
    }, []);

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

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

import * as dateFns from 'date-fns';
import { DatePicker } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    return (
        <div>
            <h4>动态禁用日期：禁止选择之前的日期</h4>
            <DatePicker
                type="dateRange"
                disabledDate={(date, options) => {
                    if (!date || !options?.rangeStart) {
                        return false;
                    }
                    const startDate = dateFns.parseISO(options.rangeStart);
                    return dateFns.isBefore(date, startDate);
                }}
                style={{ width: 260 }}
            />
        </div>
    );
}

import { useState } from 'react';
import * as dateFns from 'date-fns';
import { DatePicker, type DatePickerDisabledDateType } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    const [today] = useState(() => 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') {
            const disabledStart = dateFns.subDays(baseDate, 2);
            const disabledEnd = dateFns.addDays(baseDate, 2);
            return disabledStart <= date && date <= disabledEnd;
        } else if (rangeInputFocus === 'rangeEnd') {
            const disabledStart = dateFns.subDays(baseDate, 3);
            const disabledEnd = dateFns.addDays(baseDate, 3);
            return disabledStart <= date && date <= disabledEnd;
        } else {
            return false;
        }
    };

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

import { DatePicker } from '@fibrous/semi-ui-react';

const defaultValue = new Date(2019, 6, 23, 12);

export default function DatePickerDemo() {
    return <DatePicker format="yyyy年MM月dd日 HH:mm" type="dateTime" defaultValue={defaultValue} />;
}

import { useState, useCallback, type MouseEvent } from 'react';
import * as dateFns from 'date-fns';
import { IconClose, IconChevronDown } from '@fibrous/semi-icons-react';
import { DatePicker, Button, ButtonGroup } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    const [date, setDate] = useState<Date | null>(() => new Date(2019, 6, 23, 12));
    const formatToken = 'yyyy-MM-dd';
    const onChange = useCallback((date: Date | Date[]) => {
        setDate(date as Date);
    }, []);
    const onClear = useCallback((e?: MouseEvent) => {
        e?.stopPropagation();
        setDate(null);
    }, []);

    return (
        <DatePicker
            onChange={onChange}
            value={date}
            format={formatToken}
            triggerRender={({ placeholder }) => (
                // The clear button is a sibling of the trigger button: buttons cannot nest
                <ButtonGroup theme="light">
                    <Button icon={<IconChevronDown />} iconPosition="right">
                        {(date && dateFns.format(date, formatToken)) || placeholder}
                    </Button>
                    {date && <Button icon={<IconClose />} aria-label="清除" onClick={onClear} />}
                </ButtonGroup>
            )}
        />
    );
}

import { useState, useCallback, type MouseEvent } from 'react';
import * as dateFns from 'date-fns';
import { IconClose, IconChevronDown } from '@fibrous/semi-icons-react';
import { DatePicker, Button, ButtonGroup } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    const [date, setDate] = useState<Date | Date[]>();
    const formatToken = 'yyyy-MM-dd HH:mm:ss';
    const onChange = useCallback((date: Date | Date[]) => {
        setDate(date);
        console.log(date);
    }, []);
    const onClear = useCallback((e?: MouseEvent) => {
        e?.stopPropagation();
        setDate(undefined);
    }, []);

    const triggerContent = () => {
        if (Array.isArray(date) && date.length) {
            return `${dateFns.format(date[0], formatToken)} ~ ${dateFns.format(date[1], formatToken)}`;
        } else {
            return '请选择日期时间范围';
        }
    };

    return (
        <DatePicker
            type="dateTimeRange"
            onChange={onChange}
            value={date}
            triggerRender={() => (
                // The clear button is a sibling of the trigger button: buttons cannot nest
                <ButtonGroup theme="light">
                    <Button icon={<IconChevronDown />} iconPosition="right">
                        {triggerContent()}
                    </Button>
                    {date && <Button icon={<IconClose />} aria-label="清除" onClick={onClear} />}
                </ButtonGroup>
            )}
        />
    );
}

import { DatePicker, Tooltip } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    const dateStyle = {
        width: '100%',
        height: '100%',
        border: '1px solid var(--semi-color-primary)',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    };
    const renderDate = (dayNumber?: number) => {
        if (dayNumber === 1) {
            return (
                <Tooltip content="Always Day 1">
                    <div style={dateStyle}>{dayNumber}</div>
                </Tooltip>
            );
        }
        return dayNumber;
    };
    return <DatePicker renderDate={renderDate} />;
}

import clsx from 'clsx';
import { DatePicker, type DatePickerDayStatusType as DayStatusType } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    const renderFullDate = (dayNumber?: number, _fullDate?: string, { isInRange, isHover, isSelected, isSelectedStart, isSelectedEnd }: DayStatusType = {}) => {
        const prefix = 'components-datepicker-demo';
        const dateCls = clsx({
            [`${prefix}-day-inrange`]: isInRange,
            [`${prefix}-day-hover`]: isHover,
            [`${prefix}-day-selected`]: isSelected,
            [`${prefix}-day-selected-start`]: isSelectedStart,
            [`${prefix}-day-selected-end`]: isSelectedEnd,
        });
        const dayStyle = {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '80%',
            height: '80%',
            borderRadius: 'var(--semi-border-radius-circle)',
        };

        return (
            <div style={dayStyle} className={dateCls}>
                {dayNumber}
            </div>
        );
    };

    return <DatePicker style={{ width: 260 }} type="dateRange" renderFullDate={renderFullDate} />;
}

import { useRef } from 'react';
import { DatePicker, Space, Button, type DatePickerHandle } from '@fibrous/semi-ui-react';

export default function DatePickerDemo() {
    const ref = useRef<DatePickerHandle>(null);

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

    return (
        <Space vertical align="start">
            <Space>
                <Button onClick={() => ref.current?.open()}>open</Button>
                <Button onClick={() => ref.current?.close()}>close</Button>
                <Button onClick={() => ref.current?.focus()}>focus</Button>
                <Button onClick={() => ref.current?.blur()}>blur</Button>
            </Space>
            <div>
                <DatePicker type="dateTime" ref={ref} onClickOutSide={handleClickOutside} />
            </div>
        </Space>
    );
}