nili/ui
enfaartr
Tüm bileşenler

DatePicker

Genel görünüm
17 export7 varyant ekseni61 prop4 dosya
import { CalendarSystem, DatePicker, DatePickerFooter, DatePreset, DateRange, DateRangePicker } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Temel

defaultValue ile denetimsiz ya da value artı onChange ile denetimli. Takvim Farsça yerel ayarda varsayılan olarak Celali, diğerlerinde Miladi olur — hangisi olduğunu söylemeniz seyrek gerekir.

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} />
}

Takvim sistemleri

calendar Celali (Hicri Şemsi) ya da Miladi’yi dayatır; locale ay adlarını, gün adlarını ve rakamları belirler. allowCalendarSwitch başlığa bir anahtar koyar; kullanıcı kendisi değiştirir.

celali · fa
شهریور ۱۴۰۵
شیدسچپج
miladi · en
September 2026
MTWTFSS
değiştirilebilir
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: "میلادی" }}
      />
    </>
  )
}

Sınırlar, devre dışı günler ve işaretler

minDate ve maxDate aralığı kırpar; gerisini isDateDisabled halleder — hafta sonları, tatiller, odanın zaten dolu olduğu günler. markedDates Figma’nın işaret noktasını alır.

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}
    />
  )
}

Alt bilgi

footer serbest bir yuvadır; DatePickerFooter genelde içine konan Figma satırıdır. Seçici bir açılır katmandayken ve seçim yalnızca Uygula’ya basınca geçerli olmalıyken kullanın.

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>
      }
    />
  )
}

Tarih aralığı seçici

Bir yerine iki tarih. presets, Figma’nın Period Range’idir — kısayol sütunu. Her aralık { from, to }’dur ve kullanıcı seçimin ortasındayken iki uçtan biri null olabilir.

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