انتخابگر تاریخ (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>
  )
}