47:I[85646,["93806","static/chunks/93806-38cf0d97d4838192.js","80102","static/chunks/80102-5b4b7d436c008692.js","78683","static/chunks/app/(docs)/%5B...slug%5D/page-4e0f29bc6e671059.js"],"PatternPreviewClient"] 48:T7a5,"use client"; import { faker } from "@faker-js/faker"; import { format } from "date-fns"; import { CalendarIcon } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Calendar } from "@/components/ui/calendar"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { cn } from "@/lib/utils"; export const title = "Date Picker with Disabled Dates"; const now = new Date(); const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1); const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0); const disabledRangeStart = faker.date.between({ from: startOfMonth, to: new Date(now.getFullYear(), now.getMonth(), 7), }); const disabledRangeEnd = new Date(disabledRangeStart); disabledRangeEnd.setDate(disabledRangeStart.getDate() + 4); const specificDisabledDate = faker.date.between({ from: new Date(now.getFullYear(), now.getMonth(), 15), to: endOfMonth, }); const Example = () => { const [date, setDate] = useState(new Date()); const disabledDays = [ { from: disabledRangeStart, to: disabledRangeEnd }, { dayOfWeek: [0, 6] }, // Disable weekends specificDisabledDate, // Disable specific date ]; return (

React Date Picker with Disabled Dates

Installation

On this page