56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
'use client'
|
|
import {Popover, PopoverContent, PopoverTrigger} from '@/components/ui/popover'
|
|
import {Button} from './ui/button'
|
|
import {merge} from '@/lib/utils'
|
|
import {CalendarIcon} from 'lucide-react'
|
|
import {format} from 'date-fns'
|
|
import {Calendar} from './ui/calendar'
|
|
|
|
export type DatePickerProps = {
|
|
className?: string
|
|
onChange?: (date: Date | undefined) => void
|
|
value?: Date
|
|
disabled?: boolean
|
|
required?: boolean
|
|
placeholder?: string
|
|
error?: boolean
|
|
errorMessage?: string
|
|
description?: string
|
|
helperText?: string
|
|
format?: string
|
|
}
|
|
|
|
export default function DatePicker(props: DatePickerProps) {
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
theme="outline"
|
|
className={merge(
|
|
'w-40 justify-start text-left font-normal h-9',
|
|
!props.value && 'text-muted-foreground',
|
|
props.disabled && 'cursor-not-allowed opacity-70',
|
|
props.className,
|
|
)}
|
|
>
|
|
<CalendarIcon/>
|
|
<span className={merge(`text-sm`, !props.value && 'text-weak')}>
|
|
{props.value
|
|
? format(props.value, props.format || 'yyyy-MM-dd HH:mm:ss')
|
|
: props.placeholder || '选择日期'
|
|
}
|
|
</span>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="start">
|
|
<Calendar
|
|
mode="single"
|
|
selected={props.value}
|
|
onSelect={props.onChange}
|
|
initialFocus
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|