Support responsive date pickers for different screen sizes

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?

[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;
}

[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.