Date Picker

A Date Picker component from shadcn/ui with modification.

Installation

This component is dependent on floating-button component. Please add that component first before adding this one.

Install the following dependencies:

npm install date-fns

1. Copy and paste the following code into your project.

@/components/ui/date/date-picker.tsx

"use client";
import { format } from "date-fns";
import { CalendarDaysIcon } from "lucide-react";
 
import { cn } from "@/lib/utils";
import { IconButton } from "@/components/ui/buttons/icon-button";
import { FloatingLabelButon } from "@/components/ui/buttons/floating-label-button";
import { Calendar } from "@/components/ui/calendar";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { ComponentPropsWithoutRef } from "react";
import { type SelectSingleEventHandler } from "react-day-picker";
 
// ----------------------------------------------------------------------
 
interface DatePickerProps {
	date?: Date;
	onSelect?: SelectSingleEventHandler;
	label?: string;
	btnProps?: Omit<React.ComponentPropsWithoutRef<typeof FloatingLabelButon>, "value" | "label">;
	calendarProps?: Omit<ComponentPropsWithoutRef<typeof Calendar>, "selected" | "onSelect" | "mode">;
}
 
export function DatePicker({ date, onSelect, btnProps, calendarProps, label = "Pick a date" }: DatePickerProps) {
	return (
		<Popover>
			<PopoverTrigger asChild>
				<FloatingLabelButon
					variant="outline"
					label={label}
					value={!!date ? format(date, "PPP") : ""}
					{...btnProps}
					className={cn(
						"w-full justify-start text-base select-none overflow-x-clip py-1 cursor-text",
						!date && "text-muted-foreground",
						btnProps?.className,
					)}
					endIcon={
						<IconButton size="md" asChild>
							<CalendarDaysIcon className="fill-common/12 stroke-common/80 !p-1.5 size-9 min-w-9 max-w-9 min-h-9 max-h-9 hover:bg-foreground/5" />
						</IconButton>
					}
				/>
			</PopoverTrigger>
			<PopoverContent className="w-auto p-0">
				<Calendar
					mode="single"
					selected={date}
					onSelect={onSelect}
					initialFocus
					captionLayout="dropdown-buttons"
					fromYear={1990}
					{...calendarProps}
				/>
			</PopoverContent>
		</Popover>
	);
}

2. Update your `calendar` component after installing shadcn `date-picker` component.

import { ChevronLeft, ChevronRight } from "lucide-react";
 
function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
	return (
		<DayPicker
            ...
			components={{
				IconLeft: () => <ChevronLeft className="h-4 w-4" />,
				IconRight: () => <ChevronRight className="h-4 w-4" />,
			}}
			{...props}
		/>
	);
}

Shadcn

This date-picker component is built on top of the excellent foundation provided by Shadcn/UI.

For a deeper dive into the core concepts and building blocks, check out the original Shadcn date-picker component.