完善账单页面，抽取公共页面组件

src/components/date-picker.tsx

@@ -0,0 +1,56 @@
+'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
+          variant={'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={`text-sm`}>
+            {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>
+  )
+}