search

hypeserver / react-date-range

A React component for choosing dates and date ranges.
MIT License
2.57k stars 658 forks source link

Can I customize defaultStaticRanges to add more options #540

Open ImranArtwel opened 2 years ago

ImranArtwel commented 2 years ago

Subject of the issue

I would like to add more static ranges like quarter, last quarter and next quarter to defaultStaticRanges

Environment

Package Version: React version: Node version: Browser:

jayachandra572 commented 2 years ago

@imranArtwel define additional object below mention format const moreOption = [ { label: "last quarter", range: () => ({ startDate:addMonths(new Date(), -3), endDate: new Date() }) }, { label: "last quarter", range: () => ({ startDate:new Date(), endDate: addMonths(new Date(), 3) }) }, ]

const totalRages = [...defaultStaticRanges,...createStaticRanges(moreOption)]

<DateRangePicker staticRanges={totalRages} direction="vertical" rangeColors = {['#4d2400']} />)

  1. `add months function imported from date-fns package
  2. defaultStaticRanges imported from 'react-date-range' package