DateRangePicker

This component is used to select a date range.

Installation

import { DateRangePicker } from 'uxp/components';

Signature

const DateRangePicker: React.FunctionComponent<IDateRangePickerProps>

Examples

<DateRangePicker
     startDate={startDate}
     endDate={endDate}
     closeOnSelect
     onChange={(newStart, newEnd) => { setStartDate(newStart); setEndDate(newEnd) }}
 />

Properties

Name
Type
Mandatory
Default Value
Example Value

title

string

No

-

-

startDate

string | Date

Yes

-

-

endDate

string | Date

Yes

-

-

preset

string

No

-

-

onChange

(newStartDate: string | Date, newEndDate: string | Date, preset?: string) => void

Yes

-

-

closeOnSelect

boolean

No

-

-

disableInput

boolean

No

-

-

hideLabels

boolean

No

-

-

hideInput

boolean

No

-

-

showFullMonthName

boolean

No

-

-

compact

boolean

No

-

-

spacingMode

No

-

-

renderAsPill

{ minWidth?: number, maxWidth?: number }

No

-

-

presets

{ enable: boolean customPresets?: DateRangePreset[], renderPreset?: (preset: DateRangePreset, index: number, onSelectPreset: (preset: string) => void) => React.ReactNode, parseRelativeDatesOnSelect?: boolean // if this is set to true, relative dates will be parsed to dates }

No

-

-

Last updated