|
should match the snapshot 1`] = `
|
should match the snapshot 1`] = `
|
should match the snapshot 1`] = `
|
should match the snapshot 1`] = `
|
should match the snapshot 1`] = `
|
should match the snapshot 1`] = `
|
', () => {
+ // ── Existing tests ──────────────────────────────────────────────────────
+
it('should match the snapshot', () => {
const { asFragment } = render();
expect(asFragment()).toMatchSnapshot();
@@ -40,10 +42,182 @@ describe('', () => {
});
it('should switch to year mode', () => {
- const { container, getByText } = render();
+ const { container } = render();
const titleBtn = container.querySelector('.ty-calendar__title-btn');
fireEvent.click(titleBtn!);
- // Should show months
expect(container.querySelector('.ty-calendar__months')).toBeTruthy();
});
+
+ // ── weekStartsOn ───────────────────────────────────────────────────────
+
+ it('should start weeks on Monday when weekStartsOn={1}', () => {
+ const { container } = render();
+ const headers = container.querySelectorAll('.ty-calendar__cell-header');
+ expect(headers[0].textContent).toBe('Mo');
+ expect(headers[6].textContent).toBe('Su');
+ });
+
+ // ── showWeekNumber ─────────────────────────────────────────────────────
+
+ it('should render week numbers when showWeekNumber is true', () => {
+ const { container } = render();
+ const weekNumCells = container.querySelectorAll('.ty-calendar__week-number');
+ expect(weekNumCells.length).toBeGreaterThan(0);
+ // Week number header
+ const weekNumHeader = container.querySelector('.ty-calendar__week-number-header');
+ expect(weekNumHeader).toBeTruthy();
+ expect(weekNumHeader!.textContent).toBe('#');
+ });
+
+ // ── Range selection ────────────────────────────────────────────────────
+
+ it('should support range selection mode', () => {
+ const onRangeChange = jest.fn();
+ const { container } = render(
+
+ );
+ const cells = container.querySelectorAll('.ty-calendar__cell_in-view');
+ // Click first date to start range
+ fireEvent.click(cells[4]);
+ // Click second date to end range
+ fireEvent.click(cells[10]);
+ expect(onRangeChange).toHaveBeenCalledTimes(1);
+ const args = onRangeChange.mock.calls[0][0] as [Date, Date];
+ expect(args[0]).toBeInstanceOf(Date);
+ expect(args[1]).toBeInstanceOf(Date);
+ });
+
+ // ── Multiple selection ─────────────────────────────────────────────────
+
+ it('should support multiple selection mode', () => {
+ const onMultipleChange = jest.fn();
+ const { container } = render(
+
+ );
+ const cells = container.querySelectorAll('.ty-calendar__cell_in-view');
+ fireEvent.click(cells[2]);
+ expect(onMultipleChange).toHaveBeenCalledTimes(1);
+ expect(onMultipleChange.mock.calls[0][0]).toHaveLength(1);
+ fireEvent.click(cells[5]);
+ expect(onMultipleChange).toHaveBeenCalledTimes(2);
+ expect(onMultipleChange.mock.calls[1][0]).toHaveLength(2);
+ });
+
+ // ── showToday ──────────────────────────────────────────────────────────
+
+ it('should render Today button when showToday is true', () => {
+ const { container } = render();
+ const todayBtn = container.querySelector('.ty-calendar__today-link');
+ expect(todayBtn).toBeTruthy();
+ expect(todayBtn!.textContent).toBe('Today');
+ });
+
+ // ── Decade panel ───────────────────────────────────────────────────────
+
+ it('should navigate to decade panel', () => {
+ const { container } = render();
+ const titleBtn = container.querySelector('.ty-calendar__title-btn');
+ // month → year
+ fireEvent.click(titleBtn!);
+ expect(container.querySelector('.ty-calendar__months')).toBeTruthy();
+ // year → decade
+ const titleBtn2 = container.querySelector('.ty-calendar__title-btn');
+ fireEvent.click(titleBtn2!);
+ expect(container.querySelector('.ty-calendar__decades')).toBeTruthy();
+ const decadeCells = container.querySelectorAll('.ty-calendar__decade-cell');
+ expect(decadeCells.length).toBe(12);
+ });
+
+ // ── validRange ─────────────────────────────────────────────────────────
+
+ it('should disable dates outside validRange', () => {
+ const min = new Date(2024, 0, 10);
+ const max = new Date(2024, 0, 20);
+ const { container } = render();
+ const disabledCells = container.querySelectorAll('.ty-calendar__cell_disabled');
+ expect(disabledCells.length).toBeGreaterThan(0);
+ });
+
+ it('should disable nav buttons at validRange boundaries', () => {
+ const min = new Date(2024, 0, 1);
+ const max = new Date(2024, 0, 31);
+ const { container } = render();
+ const navBtns = container.querySelectorAll('.ty-calendar__nav-btn');
+ // Both prev and next should be disabled since we can only view Jan 2024
+ expect(navBtns[0]).toBeDisabled();
+ expect(navBtns[1]).toBeDisabled();
+ });
+
+ // ── Keyboard navigation ────────────────────────────────────────────────
+
+ it('should handle keyboard navigation', () => {
+ const onChange = jest.fn();
+ const { container } = render();
+ const calendarEl = container.firstChild as HTMLElement;
+ fireEvent.keyDown(calendarEl, { key: 'ArrowRight' });
+ // Check that a cell is now focused
+ const focused = container.querySelector('.ty-calendar__cell_focused');
+ expect(focused).toBeTruthy();
+ // Press Enter to select
+ fireEvent.keyDown(calendarEl, { key: 'Enter' });
+ expect(onChange).toHaveBeenCalled();
+ });
+
+ // ── cellClassName ──────────────────────────────────────────────────────
+
+ it('should apply cellClassName to cells', () => {
+ const { container } = render(
+ (date.getDay() === 0 ? 'sunday' : undefined)}
+ />
+ );
+ const sundayCells = container.querySelectorAll('.sunday');
+ expect(sundayCells.length).toBeGreaterThan(0);
+ });
+
+ // ── dotRender ──────────────────────────────────────────────────────────
+
+ it('should render dot indicators', () => {
+ const { container } = render(
+ date.getDate() === 15}
+ />
+ );
+ const dots = container.querySelectorAll('.ty-calendar__cell-dot');
+ expect(dots.length).toBeGreaterThan(0);
+ });
+
+ it('should render dot with custom color', () => {
+ const { container } = render(
+ (date.getDate() === 15 ? '#ff0000' : false)}
+ />
+ );
+ const dot = container.querySelector('.ty-calendar__cell-dot') as HTMLElement;
+ expect(dot).toBeTruthy();
+ expect(dot.style.backgroundColor).toBe('rgb(255, 0, 0)');
+ });
+
+ // ── onMonthChange / onYearChange ───────────────────────────────────────
+
+ it('should fire onMonthChange when navigating months', () => {
+ const onMonthChange = jest.fn();
+ const { container } = render(
+
+ );
+ const navBtns = container.querySelectorAll('.ty-calendar__nav-btn');
+ fireEvent.click(navBtns[1]); // next
+ expect(onMonthChange).toHaveBeenCalledTimes(1);
+ });
});
diff --git a/packages/react/src/calendar/calendar.tsx b/packages/react/src/calendar/calendar.tsx
index 7239995c..a56c25dc 100755
--- a/packages/react/src/calendar/calendar.tsx
+++ b/packages/react/src/calendar/calendar.tsx
@@ -1,12 +1,14 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useCallback, useRef } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import { useLocale } from '../_utils/use-locale';
import {
getMonthDaysArray,
+ getISOWeekNumber,
isSameDate,
isToday,
+ compareDate,
getPrevMonthDate,
getNextMonthDate,
getPrevYearDate,
@@ -14,16 +16,27 @@ import {
} from '../date-picker/utils';
import { CalendarProps, CalendarMode } from './types';
-const MONTH_NAMES_EN = [
- 'January', 'February', 'March', 'April', 'May', 'June',
- 'July', 'August', 'September', 'October', 'November', 'December',
-];
+// ─── helpers ────────────────────────────────────────────────────────────────
+
+const dateKey = (d: Date) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+
+const getIntlMonthName = (date: Date, locale: string, style: 'long' | 'short' = 'long') => {
+ try {
+ return new Intl.DateTimeFormat(locale, { month: style }).format(date);
+ } catch {
+ return '';
+ }
+};
+
+const DEFAULT_WEEKS_EN = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+// ─── component ──────────────────────────────────────────────────────────────
const Calendar = React.forwardRef((props, ref) => {
const {
defaultValue,
fullscreen = true,
- disabledDate,
+ disabledDate: disabledDateProp,
dateCellRender,
monthCellRender,
headerRender,
@@ -36,12 +49,33 @@ const Calendar = React.forwardRef((props, ref) =>
onPanelChange,
value: _value,
mode: _mode,
+ // NEW PROPS
+ selectionMode = 'single',
+ rangeValue: _rangeValue,
+ defaultRangeValue,
+ onRangeChange,
+ multipleValue: _multipleValue,
+ defaultMultipleValue,
+ onMultipleChange,
+ weekStartsOn = 0,
+ showWeekNumber = false,
+ showToday = false,
+ validRange,
+ cellClassName,
+ cellStyle: cellStyleProp,
+ dotRender,
+ weekNumberRender,
+ onMonthChange,
+ onYearChange,
...otherProps
} = props;
const configContext = useContext(ConfigContext);
const prefixCls = getPrefixCls('calendar', configContext.prefixCls, customisedCls);
const locale = useLocale();
+ const calendarRef = useRef(null);
+
+ // ── state ──────────────────────────────────────────────────────────────────
const [selectedDate, setSelectedDate] = useState(
'value' in props ? (props.value as Date) : (defaultValue ?? new Date())
@@ -51,6 +85,29 @@ const Calendar = React.forwardRef((props, ref) =>
'mode' in props ? (props.mode as CalendarMode) : defaultMode
);
+ // Range selection state
+ const [rangeStart, setRangeStart] = useState(
+ _rangeValue?.[0] ?? defaultRangeValue?.[0] ?? null
+ );
+ const [rangeEnd, setRangeEnd] = useState(
+ _rangeValue?.[1] ?? defaultRangeValue?.[1] ?? null
+ );
+ const [rangeHover, setRangeHover] = useState(null);
+
+ // Multiple selection state
+ const [multipleSelected, setMultipleSelected] = useState>(() => {
+ const initial = _multipleValue ?? defaultMultipleValue ?? [];
+ const map = new Map();
+ initial.forEach((d) => map.set(dateKey(d), d));
+ return map;
+ });
+
+ // Keyboard focused cell
+ const [focusedDate, setFocusedDate] = useState(null);
+
+
+ // ── sync controlled props ──────────────────────────────────────────────────
+
useEffect(() => {
if ('value' in props && props.value) {
setSelectedDate(props.value);
@@ -59,24 +116,147 @@ const Calendar = React.forwardRef((props, ref) =>
}, [props.value]);
useEffect(() => {
- if ('mode' in props) {
- setMode(props.mode as CalendarMode);
- }
+ if ('mode' in props) setMode(props.mode as CalendarMode);
}, [props.mode]);
- const weeks = locale?.DatePicker?.weeks ?? ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
- const months = locale?.DatePicker?.months ?? [
+ useEffect(() => {
+ if (_rangeValue !== undefined) {
+ setRangeStart(_rangeValue?.[0] ?? null);
+ setRangeEnd(_rangeValue?.[1] ?? null);
+ }
+ }, [_rangeValue]);
+
+ useEffect(() => {
+ if (_multipleValue !== undefined) {
+ const map = new Map();
+ (_multipleValue ?? []).forEach((d) => map.set(dateKey(d), d));
+ setMultipleSelected(map);
+ }
+ }, [_multipleValue]);
+
+ // Sync DOM focus with focusedDate so :focus-visible tracks correctly
+ useEffect(() => {
+ if (focusedDate) {
+ const key = dateKey(focusedDate);
+ const cell = calendarRef.current?.querySelector(`[data-date-key="${key}"]`);
+ cell?.focus({ preventScroll: true });
+ } else {
+ // Return focus to the calendar container when focus is cleared
+ calendarRef.current?.focus({ preventScroll: true });
+ }
+ }, [focusedDate]);
+
+ // ── locale ─────────────────────────────────────────────────────────────────
+
+ const localeWeeks = locale?.DatePicker?.weeks ?? DEFAULT_WEEKS_EN;
+ const localeMonths = locale?.DatePicker?.months ?? [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
];
+ // Rotate weeks array based on weekStartsOn
+ const weeks = [...localeWeeks.slice(weekStartsOn), ...localeWeeks.slice(0, weekStartsOn)];
+ const months = localeMonths;
+
+ // Intl-based full month name
+ const getFullMonthName = (date: Date): string => {
+ const intlLocale = locale?.locale === 'zh_CN' ? 'zh-CN' : 'en-US';
+ const name = getIntlMonthName(date, intlLocale, 'long');
+ return name || months[date.getMonth()];
+ };
+
+ // ── validRange + disabledDate ──────────────────────────────────────────────
+
+ const disabledDate = useCallback(
+ (date: Date): boolean => {
+ if (validRange) {
+ if (compareDate(date, validRange[0]) < 0 || compareDate(date, validRange[1]) > 0) {
+ return true;
+ }
+ }
+ return disabledDateProp?.(date) ?? false;
+ },
+ [validRange, disabledDateProp]
+ );
+
+ const canGoPrev = (): boolean => {
+ if (!validRange) return true;
+ if (mode === 'month') {
+ const prev = getPrevMonthDate(panelDate);
+ return prev.getFullYear() > validRange[0].getFullYear() ||
+ (prev.getFullYear() === validRange[0].getFullYear() && prev.getMonth() >= validRange[0].getMonth());
+ }
+ if (mode === 'year') {
+ return panelDate.getFullYear() - 1 >= validRange[0].getFullYear();
+ }
+ // decade
+ const decadeStart = Math.floor(panelDate.getFullYear() / 10) * 10 - 10;
+ return decadeStart + 11 >= validRange[0].getFullYear();
+ };
+
+ const canGoNext = (): boolean => {
+ if (!validRange) return true;
+ if (mode === 'month') {
+ const next = getNextMonthDate(panelDate);
+ return next.getFullYear() < validRange[1].getFullYear() ||
+ (next.getFullYear() === validRange[1].getFullYear() && next.getMonth() <= validRange[1].getMonth());
+ }
+ if (mode === 'year') {
+ return panelDate.getFullYear() + 1 <= validRange[1].getFullYear();
+ }
+ const decadeStart = Math.floor(panelDate.getFullYear() / 10) * 10 + 10;
+ return decadeStart <= validRange[1].getFullYear();
+ };
+
+ // ── CSS ────────────────────────────────────────────────────────────────────
+
const cls = classNames(prefixCls, className, {
[`${prefixCls}_fullscreen`]: fullscreen,
[`${prefixCls}_card`]: !fullscreen,
});
+ // ── handlers ───────────────────────────────────────────────────────────────
+
const handleDateSelect = (date: Date) => {
- if (disabledDate?.(date)) return;
+ if (disabledDate(date)) return;
+
+ if (selectionMode === 'range') {
+ if (!rangeStart || (rangeStart && rangeEnd)) {
+ // Start new range
+ setRangeStart(date);
+ setRangeEnd(null);
+ setRangeHover(null);
+ } else {
+ // Complete range
+ const [start, end] = compareDate(date, rangeStart) >= 0
+ ? [rangeStart, date]
+ : [date, rangeStart];
+ setRangeStart(start);
+ setRangeEnd(end);
+ setRangeHover(null);
+ onRangeChange?.([start, end]);
+ }
+ setPanelDate(date);
+ onSelect?.(date);
+ return;
+ }
+
+ if (selectionMode === 'multiple') {
+ const key = dateKey(date);
+ const newMap = new Map(multipleSelected);
+ if (newMap.has(key)) {
+ newMap.delete(key);
+ } else {
+ newMap.set(key, date);
+ }
+ setMultipleSelected(newMap);
+ onMultipleChange?.(Array.from(newMap.values()));
+ setPanelDate(date);
+ onSelect?.(date);
+ return;
+ }
+
+ // Single selection
if (!('value' in props)) {
setSelectedDate(date);
}
@@ -100,20 +280,187 @@ const Calendar = React.forwardRef((props, ref) =>
const handleMonthSelect = (month: number) => {
const newDate = new Date(panelDate.getFullYear(), month, 1);
- handleDateSelect(newDate);
+ setPanelDate(newDate);
handleModeChange('month');
+ onMonthChange?.(newDate);
+ };
+
+ const handleYearSelect = (year: number) => {
+ const newDate = new Date(year, panelDate.getMonth(), 1);
+ setPanelDate(newDate);
+ handleModeChange('year');
+ onYearChange?.(newDate);
};
const goPrev = () => {
- const newDate = mode === 'month' ? getPrevMonthDate(panelDate) : getPrevYearDate(panelDate);
+ if (!canGoPrev()) return;
+ setFocusedDate(null);
+ let newDate: Date;
+ if (mode === 'month') {
+ newDate = getPrevMonthDate(panelDate);
+ onMonthChange?.(newDate);
+ } else if (mode === 'year') {
+ newDate = getPrevYearDate(panelDate);
+ onYearChange?.(newDate);
+ } else {
+ // decade
+ newDate = new Date(panelDate.getFullYear() - 10, panelDate.getMonth(), 1);
+ }
+
handlePanelChange(newDate);
};
const goNext = () => {
- const newDate = mode === 'month' ? getNextMonthDate(panelDate) : getNextYearDate(panelDate);
+ if (!canGoNext()) return;
+ setFocusedDate(null);
+ let newDate: Date;
+ if (mode === 'month') {
+ newDate = getNextMonthDate(panelDate);
+ onMonthChange?.(newDate);
+ } else if (mode === 'year') {
+ newDate = getNextYearDate(panelDate);
+ onYearChange?.(newDate);
+ } else {
+ newDate = new Date(panelDate.getFullYear() + 10, panelDate.getMonth(), 1);
+ }
+
+ handlePanelChange(newDate);
+ };
+
+ const goToday = () => {
+ const today = new Date();
+ if (disabledDate(today)) return;
+ setPanelDate(today);
+ if (selectionMode === 'single') {
+ if (!('value' in props)) setSelectedDate(today);
+ onChange?.(today);
+ }
+ onPanelChange?.(today, mode);
+ };
+
+ // ── Range helpers ──────────────────────────────────────────────────────────
+
+ const isInRange = (date: Date): boolean => {
+ if (selectionMode !== 'range') return false;
+ const start = rangeStart;
+ const end = rangeEnd ?? rangeHover;
+ if (!start || !end) return false;
+ const [lo, hi] = compareDate(start, end) <= 0 ? [start, end] : [end, start];
+ return compareDate(date, lo) > 0 && compareDate(date, hi) < 0;
+ };
+
+ const isRangeStart = (date: Date): boolean => {
+ if (selectionMode !== 'range' || !rangeStart) return false;
+ const end = rangeEnd ?? rangeHover;
+ if (!end) return isSameDate(date, rangeStart);
+ return compareDate(rangeStart, end) <= 0
+ ? isSameDate(date, rangeStart)
+ : isSameDate(date, end);
+ };
+
+ const isRangeEnd = (date: Date): boolean => {
+ if (selectionMode !== 'range') return false;
+ const end = rangeEnd ?? rangeHover;
+ if (!end || !rangeStart) return false;
+ return compareDate(rangeStart, end) <= 0
+ ? isSameDate(date, end)
+ : isSameDate(date, rangeStart);
+ };
+
+ const isDateSelected = (date: Date): boolean => {
+ if (selectionMode === 'multiple') {
+ return multipleSelected.has(dateKey(date));
+ }
+ if (selectionMode === 'range') {
+ return isRangeStart(date) || isRangeEnd(date);
+ }
+ return isSameDate(selectedDate, date);
+ };
+
+ // ── keyboard ───────────────────────────────────────────────────────────────
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (mode !== 'month') return;
+ const base = focusedDate ?? selectedDate;
+ let next: Date | null = null;
+
+ switch (e.key) {
+ case 'ArrowLeft':
+ next = new Date(base.getFullYear(), base.getMonth(), base.getDate() - 1);
+ break;
+ case 'ArrowRight':
+ next = new Date(base.getFullYear(), base.getMonth(), base.getDate() + 1);
+ break;
+ case 'ArrowUp':
+ next = new Date(base.getFullYear(), base.getMonth(), base.getDate() - 7);
+ break;
+ case 'ArrowDown':
+ next = new Date(base.getFullYear(), base.getMonth(), base.getDate() + 7);
+ break;
+ case 'Enter':
+ handleDateSelect(base);
+ setFocusedDate(null);
+ e.preventDefault();
+ return;
+ case 'Escape':
+ setFocusedDate(null);
+ return;
+ default:
+ return;
+ }
+
+ if (next) {
+ e.preventDefault();
+ if (!disabledDate(next)) {
+ setFocusedDate(next);
+ // If focused date leaves current month, navigate
+ if (next.getMonth() !== panelDate.getMonth() || next.getFullYear() !== panelDate.getFullYear()) {
+ setPanelDate(next);
+ }
+ }
+ }
+ };
+
+ // ── header title ───────────────────────────────────────────────────────────
+
+ const goPrevYear = () => {
+ setFocusedDate(null);
+ const newDate = getPrevYearDate(panelDate);
+ handlePanelChange(newDate);
+ onYearChange?.(newDate);
+ };
+
+ const goNextYear = () => {
+ setFocusedDate(null);
+ const newDate = getNextYearDate(panelDate);
handlePanelChange(newDate);
+ onYearChange?.(newDate);
+ };
+
+ // ── header title ───────────────────────────────────────────────────────────
+
+ const getTitleText = (): string => {
+ const year = panelDate.getFullYear();
+ if (mode === 'decade') {
+ const decadeStart = Math.floor(year / 10) * 10;
+ return `${decadeStart} – ${decadeStart + 9}`;
+ }
+ if (mode === 'year') return `${year}`;
+ if (fullscreen) {
+ const monthName = getFullMonthName(panelDate);
+ return `${monthName} ${year}`;
+ }
+ return `${months[panelDate.getMonth()]} ${year}`;
};
+ const handleTitleClick = () => {
+ if (mode === 'month') handleModeChange('year');
+ else if (mode === 'year') handleModeChange('decade');
+ else handleModeChange('month');
+ };
+
+ // ── render header ──────────────────────────────────────────────────────────
+
const renderHeader = () => {
if (headerRender) {
return headerRender({
@@ -124,40 +471,89 @@ const Calendar = React.forwardRef((props, ref) =>
});
}
- const year = panelDate.getFullYear();
- const month = panelDate.getMonth();
- const monthName = locale?.locale === 'zh_CN'
- ? `${months[month]}`
- : MONTH_NAMES_EN[month];
+ const yearUnit = mode === 'year' ? 'decade' : 'year';
return (
-
+
+
+ {mode === 'month' && (
+
+ )}
+
-
+
+ {mode === 'month' && (
+
+ )}
+
+
+ {showWeekNumber && (
+ |
+ #
+ |
+ )}
{weeks.map((week, i) => (
{week}
@@ -166,41 +562,80 @@ const Calendar = React.forwardRef((props, ref) =>
|
- {Array.from({ length: panelDays.length / 7 }, (_, row) => (
-
- {panelDays.slice(row * 7, row * 7 + 7).map((dayCell, col) => {
- const isDisabled = disabledDate?.(dayCell.date) ?? false;
- const cellCls = classNames(`${prefixCls}__cell`, {
- [`${prefixCls}__cell_in-view`]: dayCell.isThisMonth,
- [`${prefixCls}__cell_today`]: isToday(dayCell.date),
- [`${prefixCls}__cell_selected`]: isSameDate(selectedDate, dayCell.date),
- [`${prefixCls}__cell_disabled`]: isDisabled,
- });
- return (
- handleDateSelect(dayCell.date)}
- role="gridcell"
- >
-
- {dayCell.label}
- {dateCellRender && dayCell.isThisMonth && (
-
- {dateCellRender(dayCell.date)}
-
- )}
- |
+ {showWeekNumber && (
+ |
+ {weekNumberRender ? weekNumberRender(weekNum) : weekNum}
|
- );
- })}
-
- ))}
+ )}
+ {rowDays.map((dayCell, col) => {
+ const isDisabled = disabledDate(dayCell.date);
+ const selected = isDateSelected(dayCell.date);
+ const focused = focusedDate && isSameDate(focusedDate, dayCell.date);
+ const dot = dotRender?.(dayCell.date);
+ const customCls = cellClassName?.(dayCell.date);
+ const customStyle = cellStyleProp?.(dayCell.date);
+
+ const cellCls = classNames(`${prefixCls}__cell`, customCls, {
+ [`${prefixCls}__cell_in-view`]: dayCell.isThisMonth,
+ [`${prefixCls}__cell_today`]: isToday(dayCell.date),
+ [`${prefixCls}__cell_selected`]: selected,
+ [`${prefixCls}__cell_disabled`]: isDisabled,
+ [`${prefixCls}__cell_focused`]: focused,
+ [`${prefixCls}__cell_in-range`]: isInRange(dayCell.date),
+ [`${prefixCls}__cell_range-start`]: isRangeStart(dayCell.date),
+ [`${prefixCls}__cell_range-end`]: isRangeEnd(dayCell.date),
+ });
+
+ return (
+ handleDateSelect(dayCell.date)}
+ onMouseEnter={() => {
+ if (selectionMode === 'range' && rangeStart && !rangeEnd) {
+ setRangeHover(dayCell.date);
+ }
+ }}
+ role="gridcell"
+ tabIndex={focused ? 0 : -1}
+ aria-selected={selected}
+ aria-disabled={isDisabled}
+ >
+
+ {dayCell.label}
+ {dot && (
+
+ )}
+ {dateCellRender && dayCell.isThisMonth && (
+
+ {dateCellRender(dayCell.date)}
+
+ )}
+ |
+ );
+ })}
+
+ );
+ })}
);
};
+ // ── render year panel ──────────────────────────────────────────────────────
+
const renderYearPanel = () => {
return (
@@ -231,12 +666,78 @@ const Calendar = React.forwardRef ((props, ref) =>
);
};
+ // ── render decade panel ────────────────────────────────────────────────────
+
+ const renderDecadePanel = () => {
+ const currentYear = panelDate.getFullYear();
+ const decadeStart = Math.floor(currentYear / 10) * 10;
+ const years = Array.from({ length: 12 }, (_, i) => decadeStart - 1 + i);
+
+ return (
+
+ {years.map((year) => {
+ const isOutOfRange = year < decadeStart || year > decadeStart + 9;
+ const isCurrentYear = year === currentYear;
+ const cellCls = classNames(`${prefixCls}__decade-cell`, {
+ [`${prefixCls}__decade-cell_selected`]: isCurrentYear,
+ [`${prefixCls}__decade-cell_out`]: isOutOfRange,
+ });
+ return (
+ handleYearSelect(year)}
+ >
+ {year}
+
+ );
+ })}
+
+ {
+ (calendarRef as React.MutableRefObject ).current = node;
+ if (typeof ref === 'function') ref(node);
+ else if (ref) (ref as React.MutableRefObject).current = node;
+ }}
+ className={cls}
+ style={style}
+ tabIndex={0}
+ onKeyDown={handleKeyDown}
+ >
{renderHeader()}
- {mode === 'month' ? renderMonthPanel() : renderYearPanel()}
+ {renderBody()}
+ {renderFooter()}
);
});
diff --git a/packages/react/src/calendar/demo/CardMode.tsx b/packages/react/src/calendar/demo/CardMode.tsx
new file mode 100644
index 00000000..7d9a7c10
--- /dev/null
+++ b/packages/react/src/calendar/demo/CardMode.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Calendar } from '@tiny-design/react';
+
+export default function CardModeDemo() {
+ const [value, setValue] = React.useState(new Date());
+
+ return (
+
+
+
+ Use arrow keys to navigate, Enter to select, Escape to reset focus.
+
+ setValue(date)}
+ fullscreen={false}
+ cellClassName={(date) =>
+ date.getDay() === 0 || date.getDay() === 6 ? 'weekend-cell' : undefined
+ }
+ />
+
+ );
+}
diff --git a/packages/react/src/calendar/demo/DotIndicator.tsx b/packages/react/src/calendar/demo/DotIndicator.tsx
new file mode 100644
index 00000000..17815e5c
--- /dev/null
+++ b/packages/react/src/calendar/demo/DotIndicator.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Calendar } from '@tiny-design/react';
+
+// Simulate some event dates
+const eventDates = new Set([3, 7, 12, 15, 20, 25]);
+
+export default function DotIndicatorDemo() {
+ const [value, setValue] = React.useState(new Date());
+
+ return (
+ setValue(date)}
+ fullscreen={false}
+ dotRender={(date) => {
+ if (eventDates.has(date.getDate())) {
+ return date.getDate() % 2 === 0 ? '#f56c6c' : true;
+ }
+ return false;
+ }}
+ />
+ );
+}
diff --git a/packages/react/src/calendar/demo/MultipleSelection.tsx b/packages/react/src/calendar/demo/MultipleSelection.tsx
new file mode 100644
index 00000000..b3452985
--- /dev/null
+++ b/packages/react/src/calendar/demo/MultipleSelection.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Calendar } from '@tiny-design/react';
+
+export default function MultipleSelectionDemo() {
+ const [dates, setDates] = React.useState([]);
+
+ return (
+
+
+ {dates.length > 0 && (
+
+ Selected: {dates.map((d) => d.toLocaleDateString()).join(', ')}
+
+ )}
+
+
+ {range && (
+
+ {range[0].toLocaleDateString()} → {range[1].toLocaleDateString()}
+
+ )}
+
{panelDays.slice(row * 7, row * 7 + 7).map((dayCell, col) => {
const isDisabled = disabledDate?.(dayCell.date) ?? false;
+ const isSelected = !range && date && isSameDate(date, dayCell.date);
+ const isRangeStart = !!(rangeStart && isSameDate(rangeStart, dayCell.date));
+ const isRangeEnd = !!(rangeEnd && isSameDate(rangeEnd, dayCell.date));
+ const isPreviewStart = !!(previewStart && isSameDate(previewStart, dayCell.date));
+ const isPreviewEnd = !!(previewEnd && isSameDate(previewEnd, dayCell.date));
+ const hasFullRange = !!(rangeStart && rangeEnd);
+ const hasPreviewRange = !!(previewStart && previewEnd);
+ const isInRange = hasFullRange && rangeStart && rangeEnd
+ ? isDateInRange(dayCell.date, rangeStart, rangeEnd)
+ : false;
+ const isInPreviewRange = hasPreviewRange && previewStart && previewEnd
+ ? isDateInRange(dayCell.date, previewStart, previewEnd)
+ : false;
const cls = classNames(`${prefixCls}__cell`, {
[`${prefixCls}__cell_in-view`]: dayCell.isThisMonth,
[`${prefixCls}__cell_today`]: isToday(dayCell.date),
- [`${prefixCls}__cell_selected`]: date && isSameDate(date, dayCell.date),
+ [`${prefixCls}__cell_selected`]: isSelected,
+ [`${prefixCls}__cell_range-start`]: isRangeStart || (isPreviewStart && !rangeEnd),
+ [`${prefixCls}__cell_range-end`]: isRangeEnd || (isPreviewEnd && !rangeEnd),
+ [`${prefixCls}__cell_in-range`]: isInRange,
+ [`${prefixCls}__cell_in-preview-range`]: !hasFullRange && isInPreviewRange,
[`${prefixCls}__cell_disabled`]: isDisabled,
});
return (
- | handleClick(dayCell)}>
+ | handleClick(dayCell)}
+ onMouseEnter={() => !isDisabled && onHoverDateChange?.(dayCell.date)}
+ onMouseLeave={() => onHoverDateChange?.(null)}>
{dayCell.label}
diff --git a/packages/react/src/date-picker/style/_index.scss b/packages/react/src/date-picker/style/_index.scss
index d743e350..329e5948 100755
--- a/packages/react/src/date-picker/style/_index.scss
+++ b/packages/react/src/date-picker/style/_index.scss
@@ -141,13 +141,13 @@ $dp: #{$prefix}-date-picker;
display: inline-flex;
align-items: center;
justify-content: center;
- width: 24px;
- height: 24px;
+ width: 28px;
+ height: 28px;
border: none;
background: transparent;
color: var(--ty-color-text-tertiary);
cursor: pointer;
- font-size: 14px;
+ font-size: 18px;
border-radius: 4px;
transition: color 0.2s;
@@ -165,8 +165,9 @@ $dp: #{$prefix}-date-picker;
&__header-label {
font-weight: 500;
+ font-size: 16px;
cursor: pointer;
- padding: 0 4px;
+ padding: 2px 6px;
border-radius: 4px;
transition: color 0.2s;
@@ -239,6 +240,37 @@ $dp: #{$prefix}-date-picker;
background: var(--ty-picker-cell-selected-hover-bg);
}
+ &__cell_in-range,
+ &__cell_in-preview-range {
+ background: var(--ty-color-primary-bg, rgb(24 144 255 / 12%));
+ }
+
+ &__cell_range-start,
+ &__cell_range-end {
+ background: var(--ty-color-primary-bg, rgb(24 144 255 / 12%));
+ }
+
+ &__cell_range-start &__cell-inner,
+ &__cell_range-end &__cell-inner {
+ background: var(--ty-color-primary);
+ color: #fff;
+ font-weight: 500;
+ }
+
+ &__cell_in-preview-range &__cell-inner,
+ &__cell_in-range &__cell-inner {
+ background: transparent;
+ color: var(--ty-color-text);
+ }
+
+ &__cell_range-start.#{$dp}__cell_in-preview-range &__cell-inner,
+ &__cell_range-end.#{$dp}__cell_in-preview-range &__cell-inner,
+ &__cell_range-start.#{$dp}__cell_in-range &__cell-inner,
+ &__cell_range-end.#{$dp}__cell_in-range &__cell-inner {
+ background: var(--ty-color-primary);
+ color: #fff;
+ }
+
&__cell_disabled &__cell-inner {
color: var(--ty-color-text-quaternary);
background: var(--ty-picker-cell-disabled-bg);
diff --git a/packages/react/src/date-picker/types.ts b/packages/react/src/date-picker/types.ts
index 292dcea1..d748425b 100644
--- a/packages/react/src/date-picker/types.ts
+++ b/packages/react/src/date-picker/types.ts
@@ -3,16 +3,20 @@ import { BaseProps, SizeType } from '../_utils/props';
export type PickerType = 'date' | 'month' | 'year';
export type PanelMode = 'date' | 'month' | 'year';
+export type DateRangeValue = [Date | null, Date | null];
+export type DatePickerValue = Date | DateRangeValue | null;
export interface DatePickerProps extends BaseProps {
/** Default date value */
- defaultValue?: Date;
+ defaultValue?: Date | DateRangeValue;
/** Controlled date value */
- value?: Date;
+ value?: Date | DateRangeValue;
/** Control popup visibility */
open?: boolean;
/** Selection granularity */
picker?: PickerType;
+ /** Enable range selection for date picker */
+ range?: boolean;
/** Display format string */
format?: string;
/** Disable picker */
@@ -34,7 +38,7 @@ export interface DatePickerProps extends BaseProps {
/** Custom suffix icon */
suffixIcon?: ReactNode;
/** Callback when date changes */
- onChange?: (date: Date | null, dateString: string) => void;
+ onChange?: (date: DatePickerValue, dateString: string | [string, string]) => void;
/** Callback when popup opens/closes */
onOpenChange?: (open: boolean) => void;
/** Callback when panel mode changes */
diff --git a/packages/react/src/date-picker/utils.ts b/packages/react/src/date-picker/utils.ts
index c4024f77..a5b48416 100755
--- a/packages/react/src/date-picker/utils.ts
+++ b/packages/react/src/date-picker/utils.ts
@@ -52,7 +52,7 @@ type DayCell = {
isThisMonth: boolean;
};
-export const getMonthDaysArray = (date: Date = TODAY): DayCell[] => {
+export const getMonthDaysArray = (date: Date = TODAY, weekStartsOn: number = 0): DayCell[] => {
const year = date.getFullYear();
const month = date.getMonth();
const dayArrays: DayCell[] = [];
@@ -61,9 +61,12 @@ export const getMonthDaysArray = (date: Date = TODAY): DayCell[] => {
const preDays = getMonthDays(preYear, preMonth);
const thisMonthFirstDayInWeek = getWeekday(year, month, 1);
+ // Adjust for weekStartsOn
+ const leadingDays = (thisMonthFirstDayInWeek - weekStartsOn + 7) % 7;
+
// last month days
- for (let i = 0; i < thisMonthFirstDayInWeek; i++) {
- const day = preDays - thisMonthFirstDayInWeek + i + 1;
+ for (let i = 0; i < leadingDays; i++) {
+ const day = preDays - leadingDays + i + 1;
dayArrays.push({
label: day,
date: new Date(preYear, preMonth, day),
@@ -80,8 +83,10 @@ export const getMonthDaysArray = (date: Date = TODAY): DayCell[] => {
});
}
- // next month days
- for (let i = 1; i <= 42 - days - thisMonthFirstDayInWeek; i++) {
+ // next month days - always fill to 42 cells (6 rows) for stable layout
+ const totalCells = 42;
+ const trailingDays = totalCells - dayArrays.length;
+ for (let i = 1; i <= trailingDays; i++) {
dayArrays.push({
label: i,
date: new Date(year, month + 1, i),
@@ -92,6 +97,13 @@ export const getMonthDaysArray = (date: Date = TODAY): DayCell[] => {
return dayArrays;
};
+export const getISOWeekNumber = (date: Date): number => {
+ const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+ d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+ const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+ return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+};
+
export const isSameDate = (dateA: Date, dateB: Date): boolean => {
const dateAYear = dateA.getFullYear();
const dateAMonth = dateA.getMonth();
@@ -102,6 +114,16 @@ export const isSameDate = (dateA: Date, dateB: Date): boolean => {
return dateAYear === dateBYear && dateAMonth === dateBMonth && dateADate === dateBDate;
};
+export const compareDate = (dateA: Date, dateB: Date): number => {
+ const a = new Date(dateA.getFullYear(), dateA.getMonth(), dateA.getDate()).getTime();
+ const b = new Date(dateB.getFullYear(), dateB.getMonth(), dateB.getDate()).getTime();
+ return a - b;
+};
+
+export const isDateInRange = (current: Date, start: Date, end: Date): boolean => {
+ return compareDate(current, start) >= 0 && compareDate(current, end) <= 0;
+};
+
export const isToday = (date: Date): boolean => {
return isSameDate(new Date(), date);
};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2e1d4677..19ec8c87 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -284,7 +284,10 @@ importers:
dependencies:
'@modelcontextprotocol/sdk':
specifier: ^1.12.1
- version: 1.27.1(zod@4.3.6)
+ version: 1.27.1(zod@3.25.76)
+ zod:
+ specifier: ^3.23.0
+ version: 3.25.76
devDependencies:
'@tiny-design/extract':
specifier: workspace:*
@@ -6250,8 +6253,8 @@ packages:
peerDependencies:
zod: ^3.25 || ^4
- zod@4.3.6:
- resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
+ zod@3.25.76:
+ resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
zwitch@2.0.4:
resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
@@ -7192,7 +7195,7 @@ snapshots:
transitivePeerDependencies:
- supports-color
- '@modelcontextprotocol/sdk@1.27.1(zod@4.3.6)':
+ '@modelcontextprotocol/sdk@1.27.1(zod@3.25.76)':
dependencies:
'@hono/node-server': 1.19.11(hono@4.12.9)
ajv: 8.18.0
@@ -7209,8 +7212,8 @@ snapshots:
json-schema-typed: 8.0.2
pkce-challenge: 5.0.1
raw-body: 3.0.2
- zod: 4.3.6
- zod-to-json-schema: 3.25.1(zod@4.3.6)
+ zod: 3.25.76
+ zod-to-json-schema: 3.25.1(zod@3.25.76)
transitivePeerDependencies:
- supports-color
@@ -13289,10 +13292,10 @@ snapshots:
yocto-queue@0.1.0: {}
- zod-to-json-schema@3.25.1(zod@4.3.6):
+ zod-to-json-schema@3.25.1(zod@3.25.76):
dependencies:
- zod: 4.3.6
+ zod: 3.25.76
- zod@4.3.6: {}
+ zod@3.25.76: {}
zwitch@2.0.4: {}
| |