Comments (15)
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).
from react-dates.
What sort of a range is one day?
from react-dates.
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?
from react-dates.
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>
);
}
}
from react-dates.
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.
from react-dates.
singleDateRange={true}
, Will help us
from react-dates.
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.
from react-dates.
+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.
from react-dates.
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.
from react-dates.
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?
from react-dates.
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.
from react-dates.
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.
from react-dates.
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.)
from react-dates.
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 ]
from react-dates.
i agree with @wzup, users expect to be able to select a single day with a date range picker.
from react-dates.
Related Issues (20)
- Any plan to support month/year range pickers? HOT 6
- wrong height on month transitions HOT 3
- How to disable the preselected dates HOT 3
- Installation command results in error HOT 2
- Focus jumps to End Date before user is finished typing Start Date
- Cannot Use verticalScrollable DayPickerRangeControllerWrapper renders Empty HOT 1
- problem SingleDatePickerInput
- Overlap behavior when date pickers are vertically stacked
- DayPickerRangeController does not change visible month when startDate or endDate update from state value HOT 4
- Question: Is there a predefined way to change the months' language? HOT 1
- Accessibility issue with shortcut panel close button
- click date input randomly triggers outside click
- Unable to test with DateRangePicker HOT 10
- Three interesting questions about border-radius in cells, years and holidays HOT 1
- isOutsideRange property ends up nullifying invalid dates entirely HOT 5
- manually force refresh/render of blockedday
- problem with react HOT 1
- Change the width of calender in daterangepicker
- Allowing past dates is messing with dates selection at DayPickerRangeController component HOT 5
- I can't change React-Dates Language! HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-dates.