@synerise/ds-date-range-picker NPM

id: date-range-picker

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

Property	Description	Type	Default
disabledDate	Function to specify if particular dates are disabled or not	(date:Date)=>boolean	-
disabledDefaultTexts	Disables the default texts translations provided by `react-intl`	boolean	`false`
forceAbsolute	Force the outcome to be converted to an absolute date	boolean	`false`
format	Format of the value displayed in the footer	string	"MMM D, YYYY"
onApply	Callback executed after applying changes	(date:Date)=>void	-
ranges	An array containing custom ranges which may be used as a short-hand	DateRange[]	[]
popoverProps	Object representing props applied to the Antd Popover component	AntdPopoverProps	{}
rangeUnits	Units available in relative range picker	RelativeUnits[]	'SECONDS','MINUTES','HOURS','DAYS','WEEKS','MONTHS','YEARS'
readOnly	Makes picker readonly	boolean	`false`
disabled	Makes picker disabled	boolean	`false`
relativePast	Enable relative filter for past ranges	boolean	`false`
relativeFuture	Enable relative filter for future ranges	boolean	`false`
showTime	Enable user to choose particular hour	boolean	`false`
showNowButton	Include "now" button to select current time (last minue)	boolean	`true`
showFilter	Enable range filtering	boolean	`false`
showCustomRange	Enable custom range form in relative range picker	boolean	`true`
validate	Function to specify if particular date ranges are correct	(date:Date)=>boolean	-
value	Value of the picker	DateRange
defaultValue	Default value of the picker (when value is undefined and when user clears input)	DateRange
startAlwaysOnTheLeft	Enable not to move month from left side to right side	boolean	`false`
onVisibleChange	Callback executed when popover with dateRangePicker changes its visibility	(visible: boolean) => void	-
filterValueSelectionModes	Allowed modes to display in filter	DateLimitMode[]	"Range", "Hour"
getPopupContainer	Function used to set the container of the date range picker.	Function(triggerNode)	`() => document.body`
texts	custom translations	Texts	undefined
disableDefaultTexts	disable DS translations fallback	boolean	false

DateRange

Property	Description	Type	Default
from	Start date	Date / string	-
to	End date	Date / string	-
type	String key for identifying the range type	'ABSOLUTE' / 'RELATIVE' / 'SINCE'	-
duration	Duration of the relative range	{type: RelativeUnit, duration:number}	-
offset	Offset of the relative range from today's date	{type: RelativeUnit, duration:number}	-

Texts

texts prop is now optional
all keys in texts is now also optional
if texts is undefined or if a key in texts is undefined default DS translations will appear in the component
disableDefaultTexts disables the above fallback, i.e. if any key is missing in texts then an empty string is used as a translation (this prop is provided for testing custom translation completeness)

translation key	Type	Default
endDatePlaceholder	string	--------
startDatePlaceholder	string	--------
selectDate	string	--------
selectTime	string	--------
filterName	string	--------
custom	ReactNode	--------
today	ReactNode	--------
yesterday	ReactNode	--------
apply	ReactNode	--------
clear	ReactNode	--------
now	ReactNode	--------
emptyDateError	ReactNode	--------
last7Days	ReactNode	--------
thisWeek	ReactNode	--------
lastWeek	ReactNode	--------
thisMonth	ReactNode	--------
lastMonth	ReactNode	--------
last3Months	ReactNode	--------
last6Months	ReactNode	--------
lastYear	ReactNode	--------
allTime	ReactNode	--------
tomorrow	ReactNode	--------
next7Days	ReactNode	--------
nextWeek	ReactNode	--------
nextMonth	ReactNode	--------
next3Months	ReactNode	--------
next6Months	ReactNode	--------
nextYear	ReactNode	--------
more	ReactNode	--------
relativeDateRange	ReactNode	--------
last	ReactNode	--------
before	ReactNode	--------
after	ReactNode	--------
since	ReactNode	--------
next	ReactNode	--------
seconds	ReactNode	--------
minutes	ReactNode	--------
hours	ReactNode	--------
days	ReactNode	--------
weeks	ReactNode	--------
months	ReactNode	--------
years	ReactNode	--------
timestampLast	ReactNode	--------
timestampNext	ReactNode	--------
timestampTill	ReactNode	--------
filter	ReactNode	--------
startDate	ReactNode	--------
endDate	ReactNode	--------
remove	ReactNode	--------
savedFiltersTrigger	ReactNode	--------
clearRange	ReactNode	--------
copyRange	ReactNode	--------
pasteRange	ReactNode	--------
range	ReactNode	--------
hour	ReactNode	--------
filterEnabled	ReactNode	--------
selectDateFilter	ReactNode	--------
datesFilter	ReactNode	--------
cancel	ReactNode	--------
everyDay	ReactNode	--------
nthDayOfMonth	ReactNode	--------
daysOf	ReactNode	--------
countedFrom	ReactNode	--------
addRule	ReactNode	--------
addTime	ReactNode	--------
change	ReactNode	--------
weekly	ReactNode	--------
monthly	ReactNode	--------
daily	ReactNode	--------
saveFilter	ReactNode	--------
selected	ReactNode	--------
selectDaysDescription	ReactNode	--------
selectAll	ReactNode	--------
unselectAll	ReactNode	--------
inverseSelection	ReactNode	--------
setTimeFor	ReactNode	--------
week	ReactNode	--------
month	ReactNode	--------
beginning	ReactNode	--------
ending	ReactNode	--------
maximumRanges	ReactNode	--------

Undocumented props

min in MonthlyFilter - controls minimal amount of entires in monthly filter, disable with undefined, default is 1

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-889 @zalastax/nolb-_syn @synerise/ds-factors @synerise/design-system

9 days ago

10 days ago

15 days ago

18 days ago

19 days ago

26 days ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

12 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

9 months ago

9 months ago

9 months ago

9 months ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago