Loading...
Installation
Usage
import { MultiSelectCalendarCard } from "@/components/ruixen/multi-select-calendar-card";
import { useState } from "react";
export default function App() {
const [selectedDates, setSelectedDates] = useState<Date[]>([]);
return (
<MultiSelectCalendarCard
selectedDates={selectedDates}
onChange={(dates) => setSelectedDates(dates)}
maxSelectable={5}
label="Choose important dates"
dateFormat="PPP"
className="max-w-md"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
selectedDates | Date[] | [] | Currently selected dates |
onChange | (dates: Date[]) => void | - | Callback when selection changes |
maxSelectable | number | - | Maximum number of selectable dates |
label | string | "Select Multiple Dates" | Card title |
dateFormat | string | "PP" | Date display format in badges |
className | string | - | Additional CSS classes |
calendarClassName | string | - | Calendar-specific CSS classes |
Features
- Multiple Selection: Select multiple dates simultaneously
- Badge Display: Selected dates shown as removable badges
- Selection Limit: Optional maximum selection constraint
- Easy Removal: Click X on badges to remove dates
- Card Layout: Clean, contained design
- Confirmation Button: Confirm selection when ready
Date Format Options
// Short format
dateFormat = "P"; // 04/29/1453
// Medium format
dateFormat = "PP"; // Apr 29, 1453
// Long format
dateFormat = "PPP"; // April 29th, 1453
// Full format
dateFormat = "PPPP"; // Friday, April 29th, 1453