انتخابگر تاریخ (Date Picker)

import { DatePicker } from '@parto-system-design/ui'
import { useState } from 'react'
import { DateRange } from 'react-day-picker'

export default function MyComponent() {
  const [dateRange, setDateRange] = useState<DateRange | undefined>()

  return <DatePicker value={dateRange} onChange={setDateRange} placeholder="انتخاب بازه تاریخ" />
}

<DatePicker value={dateRange} onChange={setDateRange} placeholder="انتخاب بازه تاریخ" usePersianCalendar={true} />

const [date, setDate] = useState<DateRange | undefined>()

;<DatePicker
  value={date}
  onChange={setDate}
  placeholder="انتخاب تاریخ"
  usePersianCalendar={true}
  mode="single"
  numberOfMonths={1}
/>

// دریافت تاریخ انتخاب شده
const selectedDate = date?.from
console.log(selectedDate) // Date object یا undefined

<DatePicker value={dateRange} onChange={setDateRange} numberOfMonths={1} />

<DatePicker value={dateRange} onChange={setDateRange} showPresets={true} usePersianCalendar={true} />

<DatePicker value={dateRange} onChange={setDateRange} showPresets={true} usePersianCalendar={false} />

<DatePicker value={dateRange} onChange={setDateRange} disabled={true} />

import { DateRange } from 'react-day-picker'

type DateRange = {
  from: Date | undefined
  to: Date | undefined
}

const [reportRange, setReportRange] = useState<DateRange>()

;<DatePicker value={reportRange} onChange={setReportRange} placeholder="بازه گزارش" usePersianCalendar={true} />

const [checkInOut, setCheckInOut] = useState<DateRange>()

;<DatePicker value={checkInOut} onChange={setCheckInOut} placeholder="تاریخ ورود و خروج" numberOfMonths={2} />

import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import * as z from 'zod'

const formSchema = z.object({
  dateRange: z
    .object({
      from: z.date(),
      to: z.date(),
    })
    .optional(),
})

function MyForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
  })

  return (
    <Form {...form}>
      <FormField
        control={form.control}
        name="dateRange"
        render={({ field }) => (
          <FormItem>
            <FormLabel>بازه تاریخ</FormLabel>
            <FormControl>
              <DatePicker value={field.value} onChange={field.onChange} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </Form>
  )
}