DurationPickera duration picker for picking time based on predefined presets

UX Guidelines

Dev

UsageCode Example

<DurationPicker
  monthOptions={[1, 2, 3]}
  weekOptions={[1, 2, 3]}
  dayOptions={[1, 2, 3, 4, 5, 6]}
  initialValue={{days: 2, weeks: 0, months: 0}}
/>

APIThis is the list of additional props for the component

customTitle

string

Dialog's custom title.

dayOptions

number[]

Array of values for the days wheel picker

disableZeroDuration

boolean

Whether to disable submitting of zero duration

disabled

boolean

Whether to disable the picker.

getValue

(value: Value) => string

A callback for formatting the presented selected value

hideLabel

boolean

Whether to hide the label

hourOptions

number[]

Array of values for the hours wheel picker

initialValue

DurationPickerValue

The initialValue of the wheel picker

minuteOptions

number[]

Array of values for the minutes wheel picker

monthOptions

number[]

Array of values for the months wheel picker

onValueChange

(value: Value) => void

On value change callback (called only when the user saves the value)

periodPicker

boolean

Whether the picker is a period picker or not

periodTypeOptions

string[]

Array of values for the period type wheel picker

periodValueOptions

number[]

Array of values for the period values wheel picker

placeholder

string

Placeholder of the picker

testID

string

The component test idUse `testID.dialogHeader` for the DurationPicker dialogHeader, `testID` for the DurationPicker textField, `testID.wheelPicker` for the DurationPicker SectionsWheelPicker.

textFieldProps

TextFieldProps

Additional TextFieldProps

weekOptions

number[]

Array of values for the weeks wheel picker

yearOptions

number[]

Array of values for the years wheel picker