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() }) },
      ]}
    />
  )
}