Skip to content

springbot/react-dates-presets

 
 

Repository files navigation

react-dates-presets

Preset picker based on react-dates - allows you to define preset ranges like today, last week, etc.

demo gif

Demo & Examples

Live demo: streamfoundations.github.io/react-dates-presets/demo

Usage

render() {
  const ranges = [
    { id: 'today', range: { startDate: moment(), endDate: moment() }, label: 'Today' },
    { id: '7_days', range: { startDate: moment().subtract(7, 'days'), endDate: moment() }, label: 'Last 7 days' },
    { id: '1_month', range: { startDate: moment().subtract(1, 'month'), endDate: moment() }, label: 'Last month' },
    { id: '2_months', range: { startDate: moment().subtract(2, 'months'), endDate: moment() }, label: 'Last 2 months' },
  ];

  return (
    <DatePresetPicker
      value={this.props.value}
      onChange={this.onChange}
      ranges={ranges}
      isOutsideRange={(date) => false /* allow future & past dates */}
    />
  );
}

You can also check out working code in /demo/App.jsx.

About

Preset picker based on `react-dates` - allows you to define preset ranges like `today`, `last week`, etc.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.8%
  • CSS 0.2%