nili/ui
enfaartr
All components

DatePicker

Overview
17 exports7 variant axes61 props4 files
import { CalendarSystem, DatePicker, DatePickerFooter, DatePreset, DateRange, DateRangePicker } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

Basic

Uncontrolled with defaultValue, or controlled with value plus onChange. The calendar defaults to Jalali under a Persian locale and Gregorian otherwise — you rarely have to say which.

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 systems

calendar forces Jalali (Solar Hijri) or Gregorian; locale drives month names, weekday names and numerals. allowCalendarSwitch puts a toggle in the header so the user can change it themselves.

jalali · fa
شهریور ۱۴۰۵
شیدسچپج
gregorian · en
September 2026
MTWTFSS
switchable
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: "میلادی" }}
      />
    </>
  )
}

Bounds, disabled days and markers

minDate and maxDate clamp the range; isDateDisabled handles the rest — weekends, holidays, days a room is already booked. markedDates gets Figma's marker dot.

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

footer is a free slot; DatePickerFooter is the Figma row that usually goes in it. Use it when the picker sits in a popover and the selection should only apply on Apply.

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

Date Range Picker

Two dates instead of one. presets is Figma's Period Range — the shortcut column. Every range is { from, to }, and either end may be null while the user is mid-selection.

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