search

hypeserver / react-date-range

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

Color of new Range selections #358

Closed dineshg20897 closed 4 years ago

dineshg20897 commented 4 years ago

Subject of the issue

I have multiple ranges with their respective colors and when i try to select a new range, the color of the new selection is different each and every time.

Sample Code: <DateRangePicker onChange={item => {console.log(item.selection)}} showSelectionPreview={true} showDateDisplay={false} color='blue' moveRangeOnFirstSelection={false} months={1} ranges={[state.selection1, state.selection2, state.selection3]} rangeColors={['red', 'green', 'yellow']} direction="horizontal" />

Here i have 3 ranges. When I select a new range, the first selection is red, second is green and third is yellow. This pattern repeats for the next 3 selections too.

I wonder if there is a single color to set for all selections? Like say default blue color.

dineshg20897 commented 4 years ago

Found it after trying for a while. For the other selections, use autoFocus={false} except for the one you want to use as main selection.

Eg. If I want selection1 to be my main selection that is newly selected range must always be in red color, add autoFocus={false} to both selection2 and selection3