React-dates: DateRangePicker can't select one day

[intpp]

In DateRangePicker is no ability to select one day?

[ljharb]

What sort of a range is one day?

[majapw]

I agree with @ljharb that a start date and end date on the same day does not really constitute a range. Can you elaborate on your usecase? We also have the SingleDatePicker component available which is specifically designed for selecting one day at a time.

[bvaughn]

FWIW, a range of a single day seems valid to me.

Consider a flight application that prompts the users to select their dates of departure and return. People occasionally fly out and back on the same day.

Another common use of ranges that comes to mind is text selection. An empty range (eg start and stop index the same) is used to indicate no text selected (zero-width cursor).

[ljharb]

I suppose that makes sense - it would need to be controllable by an option, though, since some use cases would want to prohibit a single-day range (ie, anything that's selecting "nights" as opposed to someone that's selecting "days").

Although, I'd think that for flights, you'd want two single day pickers, not one date range picker.

[bvaughn]

Use Kayak as an example. (Their UX is pretty good.) They use a single date-range picker for flights. I think it's fairly intuitive. It also supports a single day "range".

I agree though that configurability would be nice. Maybe once a start or stop date is picked, the client could provide an updated list of invalid dates? (That would allow for dynamic minimum/maximum ranges.)

[intpp]

In my case it's transactions, orders, etc... and user can pick one day for view all transactions by day, orders, etc... usually a user picks range, but sometimes need pick a day.

[ljharb]

Perhaps an option "minimumDays" that defaults to 2, can can only be an integer, 1 or higher? I can see use cases as well to require someone to pick a 3-night date range, for example.

[majapw]

I think that the minimumNights prop that already exists could be set to 0 instead of 1 to solve this problem. ...we might have to alter some of the handleDayClick logic to allow for this though (I'm not actually sure how it would behave right now).

My biggest concern is more of a design issue. Right now, with the way things are, there's no real way to indicated that both start date and end date have been selected on the same day on the calendar. Do you have any ideas for that?

[ljharb]

maybe we could add a slight left border on the start date (ie, a darker highlight) and a slight right border on the end date? that way it'd be (with | and . as highlights):
[ 1 ] [|.2.] [.3.] [.4.|] [ 5 ] versus [ 1 ] [|.2.|] [ 3 ]

[davidkpiano]

+1... In payment applications too, there's the common use-case of being able to select a date range for transactions, and sometimes, the range is "only show me transactions for this day," which does constitute a range - the start of the day to the end of the day.

[phongsakornp]

In my case, User need to select the day-off date range which can be 1 day.
This is a workaround solution.

import React from 'react';
import { DateRangePicker } from 'react-dates'; 
import { START_DATE, END_DATE } from 'react-dates/constants';

class DateRangePickerWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      focusedInput: null,
      startDate: null,
      endDate: null,
    };

    this.onDatesChange = this.onDatesChange.bind(this);
    this.onFocusChange = this.onFocusChange.bind(this);
  }

  onDatesChange({ startDate, endDate }) {

    let { focusedInput } = this.state;

    if(focusedInput === END_DATE && endDate == null) {
      endDate = startDate;
    }
    if(focusedInput === START_DATE) {
      focusedInput = END_DATE;
      endDate = null;
    }

    this.setState({ focusedInput, startDate, endDate });
  }

  onFocusChange(focusedInput) {
    this.setState({ focusedInput });
  }

  render() {
    const { focusedInput, startDate, endDate } = this.state;
    return (
      <div>
        <DateRangePicker
          {...this.props}
          onDatesChange={this.onDatesChange}
          onFocusChange={this.onFocusChange}
          focusedInput={focusedInput}
          startDate={startDate}
          endDate={endDate}
          minimumNights={0}
        />
      </div>
    );
  }
}

[wzup]

@majapw
@ljharb

start date and end date on the same day does not really constitute a range.

It DOES constitute a range. Not only by time (00:00:00 - 23:59:59), but most importantly by logic.
People (users) expects to select a SINGLE day with a range picker. Only that fact is enough to improve a date-picker.

[dragosbulugean]

i agree with @wzup, users expect to be able to select a single day with a date range picker.

[majapw]

Hi @wzup @dragosbulugean, this feature exists already if you set minimumNights to 0. Are y'all having trouble with that functionality? If you want to improve that feature somehow, can you open a new issue?

[jackdhamu]

singleDateRange={true}, Will help us