Final working solution: shadcn date picker with timezone fix

- Implemented shadcn/ui date picker with Czech localization
- Added month/year dropdown navigation for easy date selection
- Fixed critical timezone bug causing "No valid days found" error
  - Changed from toISOString() to local date formatting
  - Dates now correctly sent as 2025-01-01 instead of 2024-12-31
- Calendar auto-closes after date selection
- All features tested and working:
  - Journey calculation with correct date ranges
  - "Vyplnit na web" button visible and functional
  - Excel export working
  - Backend successfully processes January 2025 data

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Docker Config Backup
2025-10-13 07:45:06 +02:00
parent ffdfac65de
commit b38452413d
22 changed files with 2612 additions and 653 deletions

View File

@@ -0,0 +1,64 @@
"use client"
import * as React from "react"
import { format } from "date-fns"
import { cs } from "date-fns/locale"
import { CalendarIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
interface DatePickerProps {
value?: Date
onChange?: (date: Date | undefined) => void
placeholder?: string
}
export function DatePicker({ value, onChange, placeholder = "Pick a date" }: DatePickerProps) {
const [date, setDate] = React.useState<Date | undefined>(value)
const [open, setOpen] = React.useState(false)
React.useEffect(() => {
setDate(value)
}, [value])
const handleSelect = (selectedDate: Date | undefined) => {
setDate(selectedDate)
onChange?.(selectedDate)
setOpen(false)
}
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
className={cn(
"w-full justify-start text-left font-normal",
!date && "text-muted-foreground"
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{date ? format(date, "PPP", { locale: cs }) : <span>{placeholder}</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={date}
onSelect={handleSelect}
captionLayout="dropdown"
startMonth={new Date(1900, 0)}
endMonth={new Date()}
locale={cs}
/>
</PopoverContent>
</Popover>
)
}