Date Picker

Installation

npx shadcn@latest add @chewypixel/date-picker

Usage

"use client";

import { useState } from "react";
import { DatePicker } from "@/components/ui/calendar";

export function DeliveryDate() {
  const [date, setDate] = useState<string>();

  return <DatePicker value={date} onChange={setDate} placeholder="Pick a delivery date" />;
}

Props

value

The selected date, as YYYY-MM-DD.

string

onChange

Called with the picked date, as YYYY-MM-DD.

(date: string) => void

min

The earliest date that can be picked, as YYYY-MM-DD.

string

max

The latest date that can be picked, as YYYY-MM-DD.

string

format

How the field shows the date, as a Day.js format.

string = "ddd, MMM D, YYYY"

placeholder

Shown while no date is picked. For an inline calendar, use Calendar instead of DatePicker.

string = "Pick a date"

Released under the MIT License.

More components

• Password InputA password field with a button that shows or hides what you typed. The eye icon swaps with a quick pop.
• Code InputOne box per digit for verification codes, with a blinking caret in the next box. Pasting a code and autofill from SMS both work.
• Copy ButtonAn icon button that copies text. The copy icon pops into a check, then back.
• ShimmerText with a band of light sweeping across it, for loading and thinking states.