'use client' import * as React from 'react' import { addDays, format, isBefore, isEqual, startOfToday, startOfMonth, endOfMonth } from 'date-fns' import { CalendarIcon, ChevronLeft, ChevronRight } from 'lucide-react' type DateRange = { from: Date to?: Date } interface DateRangePickerProps { value?: DateRange onChange?: (value: DateRange | undefined) => void placeholder?: string } const presets = [ { label: 'Today', value: 'today', dateRange: { from: startOfToday(), to: startOfToday(), }, }, { label: 'Yesterday', value: 'yesterday', dateRange: { from: addDays(startOfToday(), -1), to: addDays(startOfToday(), -1), }, }, { label: 'Last 7 days', value: 'last-7', dateRange: { from: addDays(startOfToday(), -6), to: startOfToday(), }, }, { label: 'Last 30 days', value: 'last-30', dateRange: { from: addDays(startOfToday(), -29), to: startOfToday(), }, }, { label: 'This Month', value: 'this-month', dateRange: { from: startOfMonth(new Date()), to: endOfMonth(new Date()), }, } ] function Calendar({ selected, onSelect, month, onMonthChange }: { selected?: DateRange onSelect: (date: Date) => void month: Date onMonthChange: (date: Date) => void }) { const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate() const firstDayOfMonth = new Date(month.getFullYear(), month.getMonth(), 1).getDay() const days = Array.from({ length: daysInMonth }, (_, i) => i + 1) const weeks = Math.ceil((daysInMonth + firstDayOfMonth) / 7) const isSelected = (date: Date) => { if (!selected?.from && !selected?.to) return false if (selected.from && !selected.to) return isEqual(date, selected.from) if (!selected.from || !selected.to) return false return ( isEqual(date, selected.from) || isEqual(date, selected.to) || (isBefore(selected.from, date) && isBefore(date, selected.to)) ) } return (

{format(month, 'MMMM yyyy')}

{['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((day) => (

{day}

))}

{Array.from({ length: firstDayOfMonth }).map((_, index) => (

))} {days.map((day) => { const date = new Date(month.getFullYear(), month.getMonth(), day) const isToday = isEqual(date, startOfToday()) return ( ) })}

) } export function DateRangePicker({ value, onChange, placeholder = "Select date range", }: DateRangePickerProps) { const [isOpen, setIsOpen] = React.useState(false) const [month1, setMonth1] = React.useState(new Date()) const [month2, setMonth2] = React.useState(addDays(new Date(), 31)) const containerRef = React.useRef(null) React.useEffect(() => { function handleClickOutside(event: MouseEvent) { if (containerRef.current && !containerRef.current.contains(event.target as Node)) { setIsOpen(false) } } document.addEventListener('mousedown', handleClickOutside) return () => document.removeEventListener('mousedown', handleClickOutside) }, []) const handleSelect = (date: Date) => { if (!value?.from || (value.from && value.to)) { onChange?.({ from: date, to: undefined }) } else { if (isBefore(date, value.from)) { onChange?.({ from: date, to: value.from }) } else { onChange?.({ from: value.from, to: date }) } } } return (

{isOpen && (

Presets

{presets.map((preset) => ( ))}

{value?.from && value?.to && (

Start Date { const date = new Date(e.target.value) onChange?.({ ...value, from: date }) }} className="mt-1 block w-full px-3 py-2 text-sm border rounded-md" />

End Date { const date = new Date(e.target.value) onChange?.({ ...value, to: date }) }} className="mt-1 block w-full px-3 py-2 text-sm border rounded-md" />

)}

) } // Example usage export default function DateRangePickerDemo() { const [dateRange, setDateRange] = React.useState() return (

Date Range Picker

Select a date range or choose from presets

{dateRange && (

Selected Range:

{format(dateRange.from, 'PPP')} - {dateRange.to ? format(dateRange.to, 'PPP') : 'Present'}

)}

) }

Date Picker