Add the possibility to get `selected range label` for `defined range` component

hypeserver / react-date-range

A React component for choosing dates and date ranges.

MIT License

2.57k stars 658 forks source link

Add the possibility to get `selected range label` for `defined range` component #530

Open atefBB opened 2 years ago

atefBB commented 2 years ago

Types of changes

[ ] Bugfix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Description

Add the possibility to get selected range label for defined range component

Related Issue: Solve this prob https://github.com/hypeserver/react-date-range/issues/228

anthonynsimon commented 2 years ago

Hey just wanted to chime in since I also needed this functionality.

In case it's helpful for anyone, you can implement this using the isSelected function on the list of default static ranges (or your own list). For example:

const onChangeHandler = (range) => {
  const knownRange = defaultStaticRanges.find((x) => x.isSelected(range.selection));

  if (knownRange) {
    console.log(`Selected known range ${knownRange.label}`)
  } else {
    console.log(`Selected custom range ${range.selection}`)
  }
}

atefBB commented 2 years ago

@anthonynsimon nice shoot! I'll try it ! Thanks.