React-dates: Inline datepicker ?

[ghost]

Hi, is this datepicker can be inline ?

[majapw]

Yeah, I mean, I would just throw it in an inline styled wrapper div. Then you should be able to easily align it horizontally in whatever form you need.

This is what it used to look like on airbnb.com. Does that answer your Q?

[ghost]

I mean when the calendar stay always no matter for click and it is part of the design, like show always in its own container somewhere in the site like this:

[altaywtf]

@vladi160 you can try https://github.com/Adphorus/react-date-range.

[majapw]

If you want to use react-dates, you can also do one of two things. I just exposed DayPickerRangeController which is a component that takes in a start date and end date, along with a onDatesChange callback and does all the fancy day callbacks and styling for you. However, it also expects a focusedInput prop so you would have to figure out some way to indicate that to the component (and some rules on how that changes). If you want to roll your own everything, you can just use the DayPicker component which is a vanilla calendar out of the box and takes in event handlers for the days as well as modifiers for the styling. You can see an example of how to use it in the source code for the DayPickerRangeController.

I think the takeaway is that there are def options, but you are free to explore other packages as well, of course. :)

[Sivli-Embir]

Sorry to bump a closed issue but it would be really nice to be able to tell the SingleDatePicker to inline with one bool prop. Any chance this could become a feature request?

Of the other projects I have looked at none come with all the features I need but this one, inline being the only exception.

[majapw]

@Kestanous it hasn't been a priority recently, but it is def on the radar to expose a component similar to the DayPickerRangeController for the SingleDatePicker.