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

import { DateRangePicker } 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 (
    <DateRangePicker value={dateRange} onChange={setDateRange} label="بازه تاریخ" placeholder="انتخاب بازه تاریخ" />
  )
}

<DateRangePicker
  value={dateRange}
  onChange={setDateRange}
  label="بازه تاریخ شمسی"
  placeholder="انتخاب بازه تاریخ"
  usePersianCalendar={true}
/>

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

<DateRangePicker
  value={dateRange}
  onChange={setDateRange}
  minDate={new Date(2024, 0, 1)}
  maxDate={new Date(2024, 11, 31)}
/>

<DateRangePicker
  value={dateRange}
  onChange={setDateRange}
  captionLayout="dropdown"
  fromYear={1380}
  toYear={1410}
  usePersianCalendar={true}
/>

import { DateRangePickerInline } from '@parto-system-design/ui'

;<DateRangePickerInline value={dateRange} onChange={setDateRange} placeholder="انتخاب تاریخ" />

export default function HotelBookingForm() {
  const [checkInOut, setCheckInOut] = useState<DateRange | undefined>()

  return (
    <form>
      <DateRangePicker
        value={checkInOut}
        onChange={setCheckInOut}
        label="تاریخ ورود و خروج"
        placeholder="انتخاب تاریخ"
        minDate={new Date()}
        numberOfMonths={2}
      />
    </form>
  )
}

export default function ReportFilter() {
  const [reportRange, setReportRange] = useState<DateRange | undefined>()

  return (
    <div className="flex gap-4">
      <DateRangePicker
        value={reportRange}
        onChange={setReportRange}
        label="بازه گزارش"
        placeholder="از تاریخ - تا تاریخ"
        usePersianCalendar={true}
        captionLayout="dropdown"
        fromYear={1400}
        toYear={1404}
      />
      <Button onClick={() => console.log(reportRange)}>مشاهده گزارش</Button>
    </div>
  )
}

import { formatPersianDateRange, toPersianDigits, getPersianMonthName } from '@parto-system-design/ui'

const formattedRange = formatPersianDateRange(new Date(2024, 0, 1), new Date(2024, 0, 15))
// خروجی: "۱ فروردین - ۱۵ فروردین ۱۴۰۲"