Date Picker
A date picker that supports ranges and quick presets.
date-fns lucide-react1'use client'
2
3import * as React from 'react'
4import { ChevronDownIcon } from 'lucide-react'
5
6import { Button } from '@/components/ui/button'
7import { Calendar } from '@/components/ui/calendar'
8import { Label } from '@/components/ui/label'
9import {
10 Popover,
11 PopoverContent,
12 PopoverTrigger,
13} from '@/components/ui/popover'
14
15export function Calendar22() {
16 const [open, setOpen] = React.useState(false)
17 const [date, setDate] = React.useState<Date | undefined>(undefined)
18
19 return (
20 <div className="flex flex-col gap-3">
21 <Label htmlFor="date" className="px-1">
22 Date of birth
23 </Label>
24 <Popover open={open} onOpenChange={setOpen}>
25 <PopoverTrigger asChild>
26 <Button
27 variant="outline"
28 id="date"
29 className="text-primary border-border h-10 w-60 justify-between font-medium hover:bg-gray-100"
30 >
31 {date ? date.toLocaleDateString() : 'Select date'}
32 <ChevronDownIcon />
33 </Button>
34 </PopoverTrigger>
35 <PopoverContent
36 className="w-auto overflow-hidden p-0 border-0"
37 align="start"
38 >
39 <Calendar
40 mode="single"
41 selected={date}
42 captionLayout="dropdown"
43 onSelect={(date) => {
44 setDate(date)
45 setOpen(false)
46 }}
47 />
48 </PopoverContent>
49 </Popover>
50 </div>
51 )
52}
53Installation
1
Install the following dependencies:
npm i date-fns lucide-react
<Popover/> and <Calendar/> component is added to your project.The Date Picker component depends on it, so make sure it’s available in your setup.See the installation instructions for Popover and Calendar components before using.2
Create a date-picker.tsx file and paste the following code into it.
1'use client'
2
3import * as React from 'react'
4import { format } from 'date-fns'
5import { Calendar as CalendarIcon } from 'lucide-react'
6
7import { Button } from '@/components/ui/button'
8import { Calendar } from '@/components/ui/calendar'
9import {
10 Popover,
11 PopoverContent,
12 PopoverTrigger,
13} from '@/components/ui/popover'
14
15export function DatePickerDemo() {
16 const [date, setDate] = React.useState<Date>()
17
18 return (
19 <Popover>
20 <PopoverTrigger asChild>
21 <Button
22 variant="outline"
23 data-empty={!date}
24 className="text-primary border-border h-10 w-32 justify-between font-medium hover:bg-gray-100 text-left"
25 >
26 <CalendarIcon />
27 {date ? format(date, 'PPP') : <span>Pick a date</span>}
28 </Button>
29 </PopoverTrigger>
30 <PopoverContent className="w-auto p-0">
31 <Calendar mode="single" selected={date} onSelect={setDate} />
32 </PopoverContent>
33 </Popover>
34 )
35}
363
Update the import paths to match your project setup.
Examples
Date of Birth Picker
1'use client'
2
3import * as React from 'react'
4import { ChevronDownIcon } from 'lucide-react'
5
6import { Button } from '@/components/ui/button'
7import { Calendar } from '@/components/ui/calendar'
8import { Label } from '@/components/ui/label'
9import {
10 Popover,
11 PopoverContent,
12 PopoverTrigger,
13} from '@/components/ui/popover'
14
15export function Calendar22() {
16 const [open, setOpen] = React.useState(false)
17 const [date, setDate] = React.useState<Date | undefined>(undefined)
18
19 return (
20 <div className="flex flex-col gap-3">
21 <Label htmlFor="date" className="px-1">
22 Date of birth
23 </Label>
24 <Popover open={open} onOpenChange={setOpen}>
25 <PopoverTrigger asChild>
26 <Button
27 variant="outline"
28 id="date"
29 className="text-primary border-border h-10 w-60 justify-between font-medium hover:bg-gray-100"
30 >
31 {date ? date.toLocaleDateString() : 'Select date'}
32 <ChevronDownIcon />
33 </Button>
34 </PopoverTrigger>
35 <PopoverContent
36 className="w-auto overflow-hidden p-0 border-0"
37 align="start"
38 >
39 <Calendar
40 mode="single"
41 selected={date}
42 captionLayout="dropdown"
43 onSelect={(date) => {
44 setDate(date)
45 setOpen(false)
46 }}
47 />
48 </PopoverContent>
49 </Popover>
50 </div>
51 )
52}
53Picker with Input
1'use client'
2
3import * as React from 'react'
4import { CalendarIcon } from 'lucide-react'
5
6import { Button } from '@/components/ui/button'
7import { Calendar } from '@/components/ui/calendar'
8import { Input } from '@/components/ui/input'
9import { Label } from '@/components/ui/label'
10import {
11 Popover,
12 PopoverContent,
13 PopoverTrigger,
14} from '@/components/ui/popover'
15
16function formatDate(date: Date | undefined) {
17 if (!date) {
18 return ''
19 }
20
21 return date.toLocaleDateString('en-US', {
22 day: '2-digit',
23 month: 'long',
24 year: 'numeric',
25 })
26}
27
28function isValidDate(date: Date | undefined) {
29 if (!date) {
30 return false
31 }
32 return !isNaN(date.getTime())
33}
34
35export function Calendar28() {
36 const [open, setOpen] = React.useState(false)
37 const [date, setDate] = React.useState<Date | undefined>(
38 new Date('2025-06-01'),
39 )
40 const [month, setMonth] = React.useState<Date | undefined>(date)
41 const [value, setValue] = React.useState(formatDate(date))
42
43 return (
44 <div className="flex flex-col gap-3">
45 <Label htmlFor="date" className="px-1">
46 Subscription Date
47 </Label>
48 <div className="relative flex gap-2">
49 <Input
50 id="date"
51 value={value}
52 placeholder="June 01, 2025"
53 className="pr-10"
54 onChange={(e) => {
55 const date = new Date(e.target.value)
56 setValue(e.target.value)
57 if (isValidDate(date)) {
58 setDate(date)
59 setMonth(date)
60 }
61 }}
62 onKeyDown={(e) => {
63 if (e.key === 'ArrowDown') {
64 e.preventDefault()
65 setOpen(true)
66 }
67 }}
68 />
69 <Popover open={open} onOpenChange={setOpen}>
70 <PopoverTrigger asChild>
71 <Button
72 id="date-picker"
73 variant="ghost"
74 className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
75 >
76 <CalendarIcon className="size-3.5" />
77 <span className="sr-only">Select date</span>
78 </Button>
79 </PopoverTrigger>
80 <PopoverContent
81 className="w-auto overflow-hidden p-0 border-0"
82 align="end"
83 alignOffset={-8}
84 sideOffset={10}
85 >
86 <Calendar
87 mode="single"
88 selected={date}
89 captionLayout="dropdown"
90 month={month}
91 onMonthChange={setMonth}
92 onSelect={(date) => {
93 setDate(date)
94 setValue(formatDate(date))
95 setOpen(false)
96 }}
97 />
98 </PopoverContent>
99 </Popover>
100 </div>
101 </div>
102 )
103}
104Date and Time Picker
1'use client'
2
3import * as React from 'react'
4import { ChevronDownIcon } from 'lucide-react'
5
6import { Button } from '@/components/ui/button'
7import { Calendar } from '@/components/ui/calendar'
8import { Input } from '@/components/ui/input'
9import { Label } from '@/components/ui/label'
10import {
11 Popover,
12 PopoverContent,
13 PopoverTrigger,
14} from '@/components/ui/popover'
15
16export function Calendar24() {
17 const [open, setOpen] = React.useState(false)
18 const [date, setDate] = React.useState<Date | undefined>(undefined)
19
20 return (
21 <div className="flex gap-4">
22 <div className="flex flex-col gap-3">
23 <Label htmlFor="date-picker" className="px-1">
24 Date
25 </Label>
26 <Popover open={open} onOpenChange={setOpen}>
27 <PopoverTrigger asChild>
28 <Button
29 variant="outline"
30 id="date-picker"
31 className="text-primary border-border h-10 w-32 justify-between font-medium hover:bg-gray-100"
32 >
33 {date ? date.toLocaleDateString() : 'Select date'}
34 <ChevronDownIcon />
35 </Button>
36 </PopoverTrigger>
37 <PopoverContent
38 className="w-auto overflow-hidden p-0 border-0"
39 align="start"
40 >
41 <Calendar
42 mode="single"
43 selected={date}
44 captionLayout="dropdown"
45 onSelect={(date) => {
46 setDate(date)
47 setOpen(false)
48 }}
49 />
50 </PopoverContent>
51 </Popover>
52 </div>
53 <div className="flex flex-col gap-3">
54 <Label htmlFor="time-picker" className="px-1">
55 Time
56 </Label>
57 <Input
58 type="time"
59 id="time-picker"
60 step="1"
61 defaultValue="05:15:10"
62 className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
63 />
64 </div>
65 </div>
66 )
67}
68Natural Language Picker
This component leverages the chrono-node library to interpret natural language dates.
Your post will be published on December 02, 2025.
1'use client'
2
3import * as React from 'react'
4import { parseDate } from 'chrono-node'
5import { CalendarIcon } from 'lucide-react'
6
7import { Button } from '@/components/ui/button'
8import { Calendar } from '@/components/ui/calendar'
9import { Input } from '@/components/ui/input'
10import { Label } from '@/components/ui/label'
11import {
12 Popover,
13 PopoverContent,
14 PopoverTrigger,
15} from '@/components/ui/popover'
16
17function formatDate(date: Date | undefined) {
18 if (!date) {
19 return ''
20 }
21
22 return date.toLocaleDateString('en-US', {
23 day: '2-digit',
24 month: 'long',
25 year: 'numeric',
26 })
27}
28
29export function Calendar29() {
30 const [open, setOpen] = React.useState(false)
31 const [value, setValue] = React.useState('In 2 days')
32 const [date, setDate] = React.useState<Date | undefined>(
33 parseDate(value) || undefined,
34 )
35 const [month, setMonth] = React.useState<Date | undefined>(date)
36
37 return (
38 <div className="flex flex-col gap-3">
39 <Label htmlFor="date" className="px-1">
40 Schedule Date
41 </Label>
42 <div className="relative flex gap-2">
43 <Input
44 id="date"
45 value={value}
46 placeholder="Tomorrow or next week"
47 className="pr-10"
48 onChange={(e) => {
49 setValue(e.target.value)
50 const date = parseDate(e.target.value)
51 if (date) {
52 setDate(date)
53 setMonth(date)
54 }
55 }}
56 onKeyDown={(e) => {
57 if (e.key === 'ArrowDown') {
58 e.preventDefault()
59 setOpen(true)
60 }
61 }}
62 />
63 <Popover open={open} onOpenChange={setOpen}>
64 <PopoverTrigger asChild>
65 <Button
66 id="date-picker"
67 variant="ghost"
68 className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
69 >
70 <CalendarIcon className="size-3.5" />
71 <span className="sr-only">Select date</span>
72 </Button>
73 </PopoverTrigger>
74 <PopoverContent
75 className="w-auto overflow-hidden p-0 border-0"
76 align="end"
77 >
78 <Calendar
79 mode="single"
80 selected={date}
81 captionLayout="dropdown"
82 month={month}
83 onMonthChange={setMonth}
84 onSelect={(date) => {
85 setDate(date)
86 setValue(formatDate(date))
87 setOpen(false)
88 }}
89 />
90 </PopoverContent>
91 </Popover>
92 </div>
93 <div className="text-muted-foreground px-1 text-sm">
94 Your post will be published on{' '}
95 <span className="font-medium">{formatDate(date)}</span>.
96 </div>
97 </div>
98 )
99}
100Form
1'use client'
2
3import { format } from 'date-fns'
4import { CalendarIcon } from 'lucide-react'
5import { useForm } from 'react-hook-form'
6import { toast } from 'sonner'
7import { z } from 'zod'
8
9import { cn } from '@/lib/utils'
10import { Button } from '@/components/ui/button'
11import { Calendar } from '@/components/ui/calendar'
12import {
13 Form,
14 FormDescription,
15 FormField,
16 FormItem,
17 FormLabel,
18 FormMessage,
19} from '@/components/ui/form'
20import {
21 Popover,
22 PopoverContent,
23 PopoverTrigger,
24} from '@/components/ui/popover'
25import { zodResolver } from '@hookform/resolvers/zod'
26
27const FormSchema = z.object({
28 dob: z.date({
29 required_error: 'A date of birth is required.',
30 }),
31})
32
33export function DatePickerForm() {
34 const form = useForm<z.infer<typeof FormSchema>>({
35 resolver: zodResolver(FormSchema),
36 })
37
38 function onSubmit(data: z.infer<typeof FormSchema>) {
39 toast('You submitted the following values', {
40 description: (
41 <pre className="mt-2 w-[320px] rounded-xl bg-gray-400 p-4">
42 <code className="text-white">
43 {JSON.stringify(
44 {
45 dob: format(data.dob, 'PPP'),
46 },
47 null,
48 2,
49 )}
50 </code>
51 </pre>
52 ),
53 })
54 }
55
56 return (
57 <Form {...form}>
58 <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
59 <FormField
60 control={form.control}
61 name="dob"
62 render={({ field }) => (
63 <FormItem className="flex flex-col">
64 <FormLabel>Date of birth</FormLabel>
65 <Popover>
66 <PopoverTrigger asChild>
67 <Button
68 variant={'outline'}
69 className={cn(
70 'text-primary border-border h-10 w-80 justify-between font-medium hover:bg-gray-100',
71 !field.value &&
72 'text-muted-foreground',
73 )}
74 >
75 {field.value ? (
76 format(field.value, 'PPP')
77 ) : (
78 <span>Pick a date</span>
79 )}
80 <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
81 </Button>
82 </PopoverTrigger>
83 <PopoverContent
84 className="w-auto p-0 border-0"
85 align="start"
86 >
87 <Calendar
88 mode="single"
89 selected={field.value}
90 onSelect={field.onChange}
91 disabled={(date) =>
92 date > new Date() ||
93 date < new Date('1900-01-01')
94 }
95 captionLayout="dropdown"
96 />
97 </PopoverContent>
98 </Popover>
99 <FormDescription>
100 Your date of birth is used to calculate your
101 age.
102 </FormDescription>
103 <FormMessage />
104 </FormItem>
105 )}
106 />
107 <Button type="submit">Submit</Button>
108 </form>
109 </Form>
110 )
111}
112On This Page