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	-	-
options	IDatePickerOptions	No	-	-
hideLabels	boolean	No	-	-
hideInput	boolean	No	-	-
showFullMonthName	boolean	No	-	-
compact	boolean	No	-	-
spacingMode	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	-	-

Related Types

• IDateRangePickerProps

• IDatePickerOptions

• ISpecialDate

• SpacingMode

• DateRangePreset

• RelativeDate