hypeserver / react-date-range

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

[feat] Ability to select startDate or endDate only #380

Open aprilmintacpineda opened 4 years ago

aprilmintacpineda commented 4 years ago

Subject of the issue

When using a date picker, the goal is to provide a range which usually comes in pair (start and end) being used like so:

select * from sales where createdAt between cast(? as date) and cast (? as date);

react-date-range currently only supports "pair", but there's a use case where you only want a start date or an end date, like so:

startDate only

{
  startDate: DateValue,
  endDate: null
}
select * from sales where createdAt >= cast(? as date)

endDate only

{
  startDate:null,
  endDate: DateValue
}
select * from sales where createdAt <= cast(? as date)

These are just sample queries and does not necessarily reflect all possible use cases for this feature.

[BUG] Bug Reproduce Steps

N/A

[BUG] Expected behaviour

N/A

Environment

Package Version: N/A React version: N/A Node version: N/A Browser: N/A

apham-eng commented 4 years ago

I had this exact use case. I ended just using a tertiary as a work-around

 {
        //minDate or maxDate cannot be null or it will crash
        dates.startDate && !isStart ? (
          <Calendar
            onChange={handleChange}
            date={value}
            minDate={dates.startDate}
          />
        ) : dates.endDate && isStart ? (
          <Calendar
            onChange={handleChange}
            date={value}
            maxDate={dates.endDate}
          />
        ) : (
          <Calendar onChange={handleChange} date={value} />
        )
      }