snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)
This commit is contained in:
48
apps/v4/examples/base/date-picker-dob.tsx
Normal file
48
apps/v4/examples/base/date-picker-dob.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { Button } from "@/styles/base-nova/ui/button"
|
||||
import { Calendar } from "@/styles/base-nova/ui/calendar"
|
||||
import { Field, FieldLabel } from "@/styles/base-nova/ui/field"
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/styles/base-nova/ui/popover"
|
||||
|
||||
export function DatePickerSimple() {
|
||||
const [open, setOpen] = React.useState(false)
|
||||
const [date, setDate] = React.useState<Date | undefined>(undefined)
|
||||
|
||||
return (
|
||||
<Field className="mx-auto w-44">
|
||||
<FieldLabel htmlFor="date">Date of birth</FieldLabel>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger
|
||||
render={
|
||||
<Button
|
||||
variant="outline"
|
||||
id="date"
|
||||
className="justify-start font-normal"
|
||||
/>
|
||||
}
|
||||
>
|
||||
{date ? date.toLocaleDateString() : "Select date"}
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto overflow-hidden p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={date}
|
||||
defaultMonth={date}
|
||||
captionLayout="dropdown"
|
||||
onSelect={(date) => {
|
||||
setDate(date)
|
||||
setOpen(false)
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user