React-dates: Responsive

[BrunoQuaresma]

Here, the datepicker broken when i use in my smartphone. Currently, this is not supported? Or is a bug?

[majapw]

Hi @BrunoQuaresma can you give any more details on how it is broken?

We used breakpoints here at Airbnb so our solution is to pass down different props (numberOfMonth={1} or orientation={VERTICAL_ORIENTATION}) once the screen size hits a certain breakpoint that we've determined to be a phone. We use window.matchMedia to check for screen size.

[ctrlaltdylan]

Interesting, thanks for sharing @majapw I was trying to use SCSS variables and CSS overrides but I'll try that approach instead.

[ctrlaltdylan]

To add to @majapw's answer, orientation={react-dates/constants.VERTICAL_ORIENTATION} does wonders combined with withPortal={true} or with withFullScreenPortal={true}

The next issue of responsiveness is easily changing the .DateRangePickerInput width without use of SCSS variables because unfortunately you can't use media queries to dynamically set SCSS variables (which would be so awesome if you could).

[rafinskipg]

Hi @ctrlaltdylan your solution worked pretty well for me except for one issue.

When changing to 2 columns from 1 column the calendar dissapears. Until I click some arrow.

[ctrlplusb]

@rafinskipg I got around that by unmounting/remounting the date picker. I use a mode state value to determine the orientation etc. If this value is null I don't render anything. When window size changes I first set it to null, and then set a timeout to hit after the next animationFrame (16ms) to set it to the desired value. You get a small flash, but the component works as expected.

[majapw]

I think this issue has been addressed. :)

[heshamelmasry77]

The issue is not addressed very well.
What you need to do @BrunoQuaresma is :
first this orientation props take : horizontal, vertical and also verticalScrollable
maybe you create a constants file look like that:

export const HORIZONTAL_ORIENTATION = "horizontal";
export const VERTICAL_ORIENTATION = "vertical";
export const VERTICAL_SCROLLABLE = "verticalScrollable"; 

then import it on your date picker JS file

 import {
  HORIZONTAL_ORIENTATION,
} from './constants'; 

and on your date picker :
you use it like that :
<DateRangePicker orientation={HORIZONTAL_ORIENTATION}/> you can choose what ever choice you want for orientation.

one more thing you will face lets say you want on mobile to have the date picker one window but on desktop you want it two windows . at this point you need to use numberOfMonths prop.

to change between that mobile and desktop or maybe even tablet . You will use react responsive

so maybe you will create some responsive js file look like that:

import React from "react";
import Responsive from "react-responsive";
export const Mobile = props => <Responsive {...props} maxWidth={767} />;
export const Default = props => <Responsive {...props} minWidth={768} />;

then after than you change the numberOfMonths on your component like that:

```

```
don't forget to import your responsive JS file at your component.

And yeah good luck man hope i helped you.