DateRangePicker

DateRangePicker UI Component

Installation

npm i @synerise/ds-date-range-picker
or
yarn add @synerise/ds-date-range-picker

Usage

import DateRangePicker from '@synerise/ds-date-range-picker'
const value = {
type: 'ABSOLUTE',
from: '2018-10-09T00:00:00+02:00',
to: '2018-12-08T23:59:59+01:00',
};
<DateRangePicker
showTime
onApply={console.log}
showFilter={false}
showRelativePicker
value={value}
forceAbsolute={false}
/>

Demo

API

PropertyDescriptionTypeDefault
disabledDateFunction to specify if particular dates are disabled or not(date:Date)=>boolean-
disabledDefaultTextsDisables the default texts translations provided by react-intlbooleanfalse
forceAbsoluteForce the outcome to be converted to an absolute datebooleanfalse
formatFormat of the value displayed in the footerstring"MMM D, YYYY"
onApplyCallback executed after applying changes(date:Date)=>void-
rangesAn array containing custom ranges which may be used as a short-handDateRange[][]
popoverPropsObject representing props applied to the Antd Popover componentAntdPopoverProps{}
rangeUnitsUnits available in relative range pickerRelativeUnits[]['SECONDS','MINUTES','HOURS','DAYS','WEEKS','MONTHS','YEARS']
relativePastEnable relative filter for past rangesbooleanfalse
relativeFutureEnable relative filter for future rangesbooleanfalse
showTimeEnable user to choose particular hourbooleanfalse
showFilterEnable range filteringbooleanfalse
showCustomRangeEnable custom range form in relative range pickerbooleantrue
validateFunction to specify if particular date ranges are correct(date:Date)=>boolean-
valueValue of the pickerDateRangenew Date()

DateRange

PropertyDescriptionTypeDefault
fromStart dateDate / string-
toEnd dateDate / string-
typeString key for identifying the range type'ABSOLUTE' / 'RELATIVE' / 'SINCE'-
durationDuration of the relative range{type: RelativeUnit, duration:number}-
offsetOffset of the relative range from today's date{type: RelativeUnit, duration:number}-

RelativeUnit = 'SECONDS' | 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS' | 'YEARS'