React-dates: Support responsive date pickers for different screen sizes

[vladbalan]

Hi guys, thanks for this great package!

Is there any way of having the date picker behave differently at different resolutions? Basically I want to set withPortal={true}, but only for phone screens.

One workaround I thought of was to have two DateRangePickers, each one visible only on phones, respectively larger screens, but they both get rendered exactly the same (with portal).

Is there a solution for this that I missed? (preferably not very hacky) And, if not, are multiple date pickers supported?

[majapw]

Hiyo! I totally understand this need and this is something that we have a need for at Airbnb as well. We happen to have breakpoints for small, medium, and large screens that we can detect using matchMedia queries (https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).

The idea would be to set the props based on the screen size:

<DateRangePicker 
  ...
  withPortal={window.matchMedia("(max-width: 400px)").matches}
/>

Hiding/showing a different datepicker config should also be an option, which is why I'm concerned when you say they both got rendered the same

they both get rendered exactly the same (with portal).

Can you clarify that point?

[vladbalan]

@majapw Thanks! matchMedia fits perfectly with the withPortal prop. Based on this we could easily set the orientation in the same manner:

const smallDevice = window.matchMedia('(max-width: 400px)').matches;
const orientation = smallDevice ? VERTICAL_ORIENTATION : HORIZONTAL_ORIENTATION;
...
<DateRangePicker 
  ...
  orientation={orientation}
  withPortal={smallDevice}
/>

Since this is a common use case it would be nice to have this documented, maybe as a best practice.

Can you clarify that point?

When trying to add 2 DateRangePickers to my component with different props:

<DateRangePicker 
  ...
  id="drp1"
  orientation={VERTICAL_ORIENTATION}
  withPortal={true}
/>
<DateRangePicker 
  ...
  id="drp2"
  orientation={HORIZONTAL_ORIENTATION}
  withPortal={false}
/>

they both get rendered the same (as if they were both set with VERTICAL_ORIENTATION and withPortal={true}.

I don't have a need for this anymore, but if someone else experiences this, they should open a new issue.

[majapw]

Fair! That is concerning though. O_o Hopefully it is not a chronic issue. We have two versions on our homepage and it seems to be okay.

[gloaec]

I dont know if this can help someone, but you can make the calendar's width fluid using a bit of css :

.DayPicker,
.DayPicker > div,
.DayPicker > div > div,
.DayPicker_transitionContainer,
.CalendarMonth_table {
  width: 100% !important;
}

.CalendarMonthGrid {
  width: 1000% !important;
}

.CalendarMonthGrid_month__horizontal {
  width: calc(10% - 18px) !important;
}

.DayPicker_weekHeader {
  width: calc(100% - 9px) !important;
}

.CalendarDay,
.DayPicker_weekHeader_li {
  width: 14.285714286% !important;
}

[SSDUBE]

Hi guys just wanted to know if there is anyway to not allow characters on the date range picker input