Documentation / @jalali-js/react / DatePickerProps

Interface: DatePickerProps

Defined in: react/src/DatePicker.tsx:24

Properties

blockHolidays?

optional blockHolidays?: boolean

Defined in: react/src/DatePicker.tsx:66

Also block holiday days. Grid variant, Jalali only.

---

className?

optional className?: string

Defined in: react/src/DatePicker.tsx:70

---

defaultDate?

optional defaultDate?: CalendarDate | CalendarDateTime | null

Defined in: react/src/DatePicker.tsx:33

The initial selection. Default: today, in system. Pass null for no initial selection, so the picker opens empty and shows placeholder until a person picks a date.

---

disabledHours?

optional disabledHours?: readonly number[]

Defined in: react/src/DatePicker.tsx:42

Hours that do not appear in the time panel (0-23). Used only when precision is 'datetime'.

---

displayFormat?

optional displayFormat?: FormatOptions

Defined in: react/src/DatePicker.tsx:57

How the date reads inside the picker's own text input / month title.

---

holidayRegion?

optional holidayRegion?: HolidayRegion

Defined in: react/src/DatePicker.tsx:68

Whose official holiday list to use. Default: 'IR' (Iran).

---

locale?

optional locale?: LocaleCode

Defined in: react/src/DatePicker.tsx:28

Which language the picker's text reads in. Default: 'en'.

---

minuteStep?

optional minuteStep?: number

Defined in: react/src/DatePicker.tsx:40

Minute options step for the time panel. Default: 1. Used only when precision is 'datetime'.

---

onChange?

optional onChange?: (value, date) => void

Defined in: react/src/DatePicker.tsx:53

Called with the selection, in both forms: value, shaped by valueFormat (what an app should store), and date, the raw calendar value (what an app should keep displaying). See architecture.md's "Display value against storage value" for why these can differ.

Parameters

value

StorageValue

date

CalendarDate | CalendarDateTime

Returns

void

---

placeholder?

optional placeholder?: string

Defined in: react/src/DatePicker.tsx:69

---

precision?

optional precision?: DatePickerPrecision

Defined in: react/src/DatePicker.tsx:38

'date' (default) selects a day only. 'datetime' adds a time panel under the grid and emits a CalendarDateTime through the storage-value contract.

---

quickNav?

optional quickNav?: boolean

Defined in: react/src/DatePicker.tsx:47

Let a person click the month or year in the grid popover's header to jump straight to a month grid or a year grid. Default: true. Has no effect on the dropdown variant.

---

rules?

optional rules?: SelectionRules

Defined in: react/src/DatePicker.tsx:62

Limits on what a person can select. Grid variant only; see CalendarProps.rules.

---

showHolidays?

optional showHolidays?: boolean

Defined in: react/src/DatePicker.tsx:64

Mark official holidays with data-holiday. Grid variant, Jalali only. Default region: Iran.

---

system?

optional system?: CalendarSystem

Defined in: react/src/DatePicker.tsx:26

Which calendar system the picker displays and selects in. Default: 'jalali'.

---

valueFormat?

optional valueFormat?: ValueFormat

Defined in: react/src/DatePicker.tsx:55

How value (above) is shaped. Default: 'gregorian-iso', a calendar-agnostic value.

---

variant?

optional variant?: "grid" | "dropdown"

Defined in: react/src/DatePicker.tsx:60

'grid': a calendar-grid popup (default). 'dropdown': three year/month/day <select>s, better suited to narrow, known-range entry such as a date of birth.