日期选择器

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

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

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

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

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

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

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

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-solid';

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

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

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

export default function DatePickerDemo() {
    return (
        <>
            <DatePicker type="dateTimeRange" style={{ width: '400px', 'margin-bottom': '8px' }} onChange={(date) => console.log(date)} />
            <DatePicker type="dateTimeRange" style={{ width: '400px' }} defaultPickerValue={defaultPickerValue} onChange={(date) => console.log(date)} />
        </>
    );
}

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

export default function DatePickerDemo() {
    return (
        <div>
            <DatePicker type="date" insetInput />
            <br />
            <br />
            <DatePicker type="dateTime" insetInput />
            <br />
            <br />
            <DatePicker type="dateRange" insetInput style={{ width: '260px' }} />
            <br />
            <br />
            <DatePicker type="dateTimeRange" insetInput style={{ width: '400px' }} />
            <br />
            <br />
            <DatePicker type="month" placeholder="请选择年月" insetInput style={{ width: '140px' }} />
            <br />
            <br />
            <DatePicker type="monthRange" placeholder="请选择年月范围" insetInput style={{ width: '200px' }} />
            <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-solid';

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

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

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

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

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

    return (
        <div>
            <h4>选择自然周</h4>
            <DatePicker style={{ width: '260px' }} 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: '260px' }} 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: '260px' }} type="dateRange" weekStartsOn={1} endDateOffset={(date) => dateFns.add(date, { days: 6 })} onChange={handleChange} />
            <br />
            <br />
        </div>
    );
}

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

const defaultValue = new Date(2024, 4, 6, 12);

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

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

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

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

const defaultValue = new Date(2024, 4, 6, 12);

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

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

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, type DatePickerPresetsType } from '@fibrous/semi-ui-solid';

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),
    }),
];

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

import { createSignal, type JSX } from 'solid-js';
import { IconBulb } from '@fibrous/semi-icons-solid';
import { DatePicker, Typography, Tabs, TabPane, Space, type DatePickerDisabledDateType } from '@fibrous/semi-ui-solid';

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

interface SlotProps {
    style?: JSX.CSSProperties;
}

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

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

function BottomSlot(props: SlotProps) {
    return (
        <Space style={{ padding: '12px 20px', ...props.style }}>
            <IconBulb style={{ color: 'var(--semi-amber-5)' }} />
            <Typography.Text strong style={{ color: 'var(--semi-color-text-2)' }}>
                定版前请阅读
            </Typography.Text>
            <Typography.Text link={{ href: 'https://semi.design/', target: '_blank' }}>发版须知</Typography.Text>
        </Space>
    );
}

function MonthBottomSlot(props: SlotProps) {
    return (
        <Space style={{ padding: '12px 20px', ...props.style }}>
            <IconBulb style={{ color: 'var(--semi-amber-5)' }} />
            <Typography.Text strong style={{ color: 'var(--semi-color-text-2)' }}>
                请阅读
            </Typography.Text>
            <Typography.Text link={{ href: 'https://semi.design/', target: '_blank' }}>须知</Typography.Text>
        </Space>
    );
}

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

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

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

    return (
        <div>
            <DatePicker topSlot={<TopSlot activeKey={activeTab()} onChange={handleTabChange} />} disabledDate={activeTab() === '1' ? uedDisabledDate : testDisabledDate} 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: '400px' }} placeholder="请选择时间范围" />
            <br />
            <br />
        </div>
    );
}

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

const defaultValue = new Date(2024, 4, 6, 12);

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

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

const today = () => new Date();

const nextValidMonth = () => {
    const nextValidDate = today();
    nextValidDate.setMonth((nextValidDate.getMonth() + 1) % 12);
    return nextValidDate;
};

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) => {
    if (panelType === 'left') {
        return { disabledHours: () => [17, 18] };
    }
    return { disabledHours: () => [12, 13, 14, 15, 16, 17, 18] };
};

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

export default function DatePickerDemo() {
    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: '400px' }} />
            </div>
            <div>
                <h4>禁用日期：禁用下个月28号之前的所有日期</h4>
                <DatePicker type="dateTimeRange" disabledDate={disabledDate} defaultPickerValue={nextValidMonth()} style={{ width: '400px' }} />
            </div>
        </div>
    );
}

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

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: '260px' }}
            />
        </div>
    );
}

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

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') {
        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;
    }
};

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

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

const defaultValue = new Date(2024, 4, 6, 12);

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

import { createSignal, Show } from 'solid-js';
import * as dateFns from 'date-fns';
import { IconClose, IconChevronDown } from '@fibrous/semi-icons-solid';
import { DatePicker, Button, ButtonGroup } from '@fibrous/semi-ui-solid';

const formatToken = 'yyyy-MM-dd';

export default function DatePickerDemo() {
    const [date, setDate] = createSignal<Date | undefined>(new Date(2024, 4, 6, 12));
    const dateText = () => {
        const value = date();
        return value ? dateFns.format(value, formatToken) : undefined;
    };
    const onChange = (value: Date | Date[]) => {
        setDate(value as Date);
    };
    const onClear = (e?: MouseEvent) => {
        e?.stopPropagation();
        setDate(undefined);
    };

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

import { createSignal, Show } from 'solid-js';
import * as dateFns from 'date-fns';
import { IconClose, IconChevronDown } from '@fibrous/semi-icons-solid';
import { DatePicker, Button, ButtonGroup } from '@fibrous/semi-ui-solid';

const formatToken = 'yyyy-MM-dd HH:mm:ss';

export default function DatePickerDemo() {
    const [date, setDate] = createSignal<Date | Date[]>();
    const onChange = (value: Date | Date[]) => {
        setDate(value);
        console.log(value);
    };
    const onClear = (e?: MouseEvent) => {
        e?.stopPropagation();
        setDate(undefined);
    };

    const triggerContent = () => {
        const value = date();
        if (Array.isArray(value) && value.length) {
            return `${dateFns.format(value[0], formatToken)} ~ ${dateFns.format(value[1], formatToken)}`;
        }
        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>
                    <Show when={date()}>
                        <Button icon={<IconClose />} aria-label="清除" onClick={onClear} />
                    </Show>
                </ButtonGroup>
            )}
        />
    );
}

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

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

const renderDate = (dayNumber?: number) => {
    if (dayNumber === 1) {
        return (
            <Tooltip content="Always Day 1">
                <div style={dateStyle}>{dayNumber}</div>
            </Tooltip>
        );
    }
    return dayNumber;
};

export default function DatePickerDemo() {
    return <DatePicker renderDate={renderDate} />;
}

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

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)',
};

const renderFullDate = (dayNumber?: number, _fullDate?: string, dayStatus?: DayStatusType) => {
    const dateCls = clsx({
        [`${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,
    });

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

export default function DatePickerDemo() {
    return <DatePicker style={{ width: '260px' }} type="dateRange" renderFullDate={renderFullDate} />;
}

import { Button, DatePicker, Space, type DatePickerElement } from '@fibrous/semi-ui-solid';

export default function DatePickerDemo() {
    let ref: DatePickerElement | undefined;

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

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