jalali-js

Appearance

Documentation / @jalali-js/react / DatePickerProps

Interface: DatePickerProps ​

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

Properties ​

className? ​

optional className?: string

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

defaultDate? ​

optional defaultDate?: CalendarDate | CalendarDateTime | null

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

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:40

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:55

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

locale? ​

optional locale?: LocaleCode

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

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

minuteStep? ​

optional minuteStep?: number

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

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:51

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:61

precision? ​

optional precision?: DatePickerPrecision

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

'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:45

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:60

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

system? ​

optional system?: CalendarSystem

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

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

valueFormat? ​

optional valueFormat?: ValueFormat

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

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

variant? ​

optional variant?: "grid" | "dropdown"

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

'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.