Date picker

Component 50

About

A date picker component with range and presets.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Date picker to your project and fits it to your theme.

Code

How Date picker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import { DatePicker } from "@/components/ui/date-picker"

export function DatePickerDemo() {
  const [date, setDate] = React.useState<Date>()

  return (
    <DatePicker 
      date={date} 
      onDateChange={setDate}
    />
  )
}