Using DateRangePicker on single input field

[giacomo-m]

Hi, is there a way for using the dateRangePicker on a single input field? like airbnb site: Thanks. Giacomo

[ljharb]

https://github.com/airbnb/react-dates/blob/master/src/components/DateRangePickerInput.jsx ?

[majapw]

I think that @giacomo-m means the combined start date/end date button that exists on our search page. That answer is that there is no out-of-the-box solution currently @giacomo-m, but if you take a look at the https://github.com/airbnb/react-dates/blob/master/src/components/DateRangePicker.jsx source, you can essentially mimic that with your own input instead. That's actually what we do on our search page. :) We simply put in a button that interacts with the DayPickerRangeController directly.

[majapw]

I think it would maybe make sense to restructure the library to take be able to swap in inputs and pickers readily but I think that's a longer term project.

[giacomo-m]

Thanks @ljharb, but the DateRangePickerInput component uses always two input fields "startDate" and "endDate". I need to show the selected date range on a single input field.

[giacomo-m]

@majapw my idea was to hide react-dates input fields and then when selected, copy the dates values on my input field using javascript. But in this way i can't open the calendar.

[osifo]

Hey @giacomo-m , i was able to get this done quickly on a project i'm working on, thanks to @majapw's comment. do let me know if you're still having issues with this. Cheers

[giacomo-m]

Hi @osifo, how did you make it? Please explain. Thanks.

[osifo]

Hey @giacomo-m, Just as @majapw noted, the key in getting this done is to make use of the DayPickerRangeController component.

I created a custom component, that renders DayPickerRangeController using custom logic. You can take a look at it here

[BeatrizCibele]

Can anyone hint me a video? I'm trying to modify a input calander to only one input instead two. I'm starting and I can't following that examples