nili/ui
enfaartr
همه‌ی کامپوننت‌ها

DatePicker

نمای کلی
۱۷ اکسپورت۷ محور واریانت۶۱ پراپ۴ فایل
import { CalendarSystem, DatePicker, DatePickerFooter, DatePreset, DateRange, DateRangePicker } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

پایه

با defaultValue بدون کنترل، یا با value به‌همراه onChange کنترل‌شده. تقویم زیر لوکال فارسی پیش‌فرض جلالی است و در بقیه میلادی — به‌ندرت لازم می‌شود خودتان بگویید کدام.

September 2026
MTWTFSS
import { DatePicker } from "@nili/ui"

export function Example() {
  const [date, setDate] = useState<Date | null>(new Date())

  return <DatePicker value={date} onChange={setDate} />
}

گاه‌شماری‌ها

calendar جلالی (هجری شمسی) یا میلادی را تحمیل می‌کند؛ locale نام ماه‌ها، نام روزهای هفته و ارقام را تعیین می‌کند. allowCalendarSwitch یک کلید در سربرگ می‌گذارد تا کاربر خودش عوضش کند.

جلالی · فارسی
شهریور ۱۴۰۵
شیدسچپج
میلادی · انگلیسی
September 2026
MTWTFSS
قابل‌تعویض
September 2026
MTWTFSS
import { DatePicker } from "@nili/ui"

export function Example() {
  return (
    <>
      <DatePicker calendar="jalali" locale="fa" />
      <DatePicker calendar="gregorian" locale="en" />

      {/* let the user pick */}
      <DatePicker
        allowCalendarSwitch
        labels={{ calendarSwitch: "Change calendar", jalali: "شمسی", gregorian: "میلادی" }}
      />
    </>
  )
}

کران‌ها، روزهای غیرفعال و نشانگرها

minDate و maxDate بازه را محدود می‌کنند؛ بقیه با isDateDisabled — آخر هفته‌ها، تعطیلات، روزهایی که اتاق قبلاً رزرو شده. markedDates نقطهٔ نشانگر فیگما را می‌گیرد.

September 2026
MTWTFSS
import { DatePicker } from "@nili/ui"

export function Example() {
  return (
    <DatePicker
      minDate={new Date()}
      maxDate={addDays(60)}
      markedDates={[addDays(3), addDays(10)]}
      isDateDisabled={(date) => date.getDay() === 5}
    />
  )
}

پابرگ

footer یک اسلات آزاد است؛ DatePickerFooter همان ردیفی از فیگماست که معمولاً داخلش می‌رود. وقتی انتخابگر در یک پاپ‌اور است و انتخاب باید فقط با زدن «اعمال» اثر کند از آن استفاده کنید.

September 2026
MTWTFSS
import { DatePicker, DatePickerFooter, Button } from "@nili/ui"

export function Example() {
  return (
    <DatePicker
      footer={
        <DatePickerFooter>
          <Button appearance="stroke" size="xs">Cancel</Button>
          <Button size="xs">Apply</Button>
        </DatePickerFooter>
      }
    />
  )
}

انتخابگر بازهٔ تاریخ

دو تاریخ به‌جای یکی. presets همان Period Range فیگماست — ستون میان‌برها. هر بازه { from, to } است، و تا وقتی کاربر وسط انتخاب است هر سرش می‌تواند null باشد.

September 2026
MTWTFSS
import { DateRangePicker } from "@nili/ui"

export function Example() {
  const [range, setRange] = useState({ from: new Date(), to: null })

  return (
    <DateRangePicker
      value={range}
      onChange={setRange}
      presets={[
        { label: "Last 7 days", range: () => ({ from: addDays(-7), to: new Date() }) },
        { label: "Last 30 days", range: () => ({ from: addDays(-30), to: new Date() }) },
        { label: "This month", range: () => ({ from: startOfMonth(), to: new Date() }) },
      ]}
    />
  )
}