Select a single day as the date range

[grouls]

Subject of the issue Is it possible to select a single day on the calendar and it to capture the whole day.

For example: { dateStart : 'Wed Jun 17 2020 00:00:00', dateEnd: 'Wed Jun 17 2020 23:59:00'}

[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

[taimoorimran]

i am looking for this too, any body know how can i use DateRangePicker for a single date selection?

[grouls]

@taimoorimran I ended up using a workaround from this.

When a single day is selected, two dates are collected. I compared these and if they were equal, if equal I checked which was the dateStart and set it's time to midnight then used Date.now() for the other date.

For example, selecting a single day gave me this date range: { dateStart : 'Wed Jun 24 2020 00:00:00', dateEnd: 'Wed Jun 24 2020 14:49:00'}

Edit: The Date.now() part of this example isn't useful if the current date cannot be selected, the second date can set to 23:59:00 instead

[keremciu]

@grouls you wanted to show date-range but wanna use as single input?

[grouls]

@keremciu yes, I wanted to cater for the scenario where the date range starts and ends on the same day. So dateStart would be the start of the day and dateEnd would be the end of the same day.

The example above works if the single day selected is today, assuming you can't have a timestamp in the future, hence the Date.now().

### Edit: Just noticed for my scenario, you can't actually select today's date, so the above example isn't usable.

[keremciu]

yes, I don't remember code well but we just imported two calendars in that specific case, not all date-range.

I can look through how was the implementation to givem ore context

[grouls]

@keremciu no I'm fine for now thanks, I have a workaround for it that I'm happy with. I can close this ticket off if unless you're going to add anymore.

[keremciu]

@grouls great then I'm closing it :)

[lushc]

I was able to work around this by setting both dates in the range to be same in onChange, but using the selected start or end date depending on which direction the user is going (i.e. if they pick 2020-08-28 and then 2020-08-10, the end date in the range hasn't changed so it needs to be set to 2020-08-10). Removing the static & input ranges and the preview is probably optional but it helps reinforce the idea that only a single date can be selected.

<DateRangePicker
  ranges={[this.state]}
  onChange={(range) => {
    const newRange = range.range1;
    let newStart = moment(newRange.startDate);
    let newEnd = moment(newRange.endDate);

    this.setState((state, props) => {
      // the important bit
      if (moment(state.endDate).isSame(newEnd, "day")) {
        newEnd = newStart;
      } else {
        newStart = newEnd;
      }

      return { startDate: newStart.toDate(), endDate: newEnd.toDate() };
    });
  }}
  staticRanges={[]}
  inputRanges={[]}
  showPreview={false}
/>