diff --git a/packages/core/lib/components/Calendar.tsx b/packages/core/lib/components/Calendar.tsx index 6b22150..897e693 100644 --- a/packages/core/lib/components/Calendar.tsx +++ b/packages/core/lib/components/Calendar.tsx @@ -4,6 +4,8 @@ import { Label } from './Label'; interface CalendarProps { mode: 'single' | 'range'; onSelect: (dates: string[]) => void; + minYear?: number; + maxYear?: number; } const today = new Date(); @@ -44,9 +46,35 @@ const TriangleIcon: React.FC<{ direction: 'left' | 'right' }> = ({ ); -export const Calendar: React.FC = ({ mode, onSelect }) => { +function getYearOptions(minYear: number, maxYear: number): number[] { + if (minYear >= maxYear) { + console.warn( + 'minYear must be less than maxYear. Using default year range.', + ); + const currentYear = new Date().getFullYear(); + return Array.from({ length: 101 }, (_, i) => currentYear - 100 + i); + } + + return Array.from( + { + length: maxYear - minYear + 1, + }, + (_, i) => minYear + i, + ); +} + +export const Calendar: React.FC = ({ + mode, + onSelect, + minYear, + maxYear, +}) => { const [currentDate, setCurrentDate] = useState(new Date()); const [selectedDates, setSelectedDates] = useState([]); + const YEARS = getYearOptions( + minYear || new Date().getFullYear() - 100, + maxYear || new Date().getFullYear(), + ); const getDaysInMonth = (date: Date): Date[] => { const year = date.getFullYear(); @@ -164,10 +192,7 @@ export const Calendar: React.FC = ({ mode, onSelect }) => { } className="mr-2 p-1 border rounded" > - {Array.from( - { length: 100 }, - (_, i) => currentDate.getFullYear() - 100 + i + 1, - ).map((year) => ( + {YEARS.map((year) => ( diff --git a/stories/core/Calendar.stories.ts b/stories/core/Calendar.stories.ts index 4e9a666..f637f71 100644 --- a/stories/core/Calendar.stories.ts +++ b/stories/core/Calendar.stories.ts @@ -17,6 +17,14 @@ const meta = { }, }, onSelect: { action: 'clicked' }, + minYear: { + control: 'number', + description: 'Minimum year to display (optional)', + }, + maxYear: { + control: 'number', + description: 'Maximum year to display (optional)', + }, }, } satisfies Meta; @@ -37,3 +45,28 @@ export const Range: Story = { console.log(`Selected date: ${date[0]} ~ ${date[1]}`), }, }; + +export const MinYearRange: Story = { + args: { + mode: 'single', + onSelect: (date: string[]) => console.log(`Selected date: ${date[0]}`), + minYear: 2020, + }, +}; + +export const MaxYearRange: Story = { + args: { + mode: 'single', + onSelect: (date: string[]) => console.log(`Selected date: ${date[0]}`), + maxYear: 2030, + }, +}; + +export const CustomYearRange: Story = { + args: { + mode: 'single', + onSelect: (date: string[]) => console.log(`Selected date: ${date[0]}`), + minYear: 2020, + maxYear: 2030, + }, +};