reactjsdaterangepickerreact-dates

react-dates responsive daterangepicker

I am using a react-dates plugin from Airbnb in one of my projects. I am using daterangepicker default calendar props like this one http://airbnb.io/react-dates/?path=/story/drp-calendar-props--default. But this is not responsive in smaller devices from tab to mobile. I want to make some changes here in the tab and mobile view like it would appear as a vertical calendar as this http://airbnb.io/react-dates/?path=/story/drp-calendar-props--vertical. I want to achieve this using the given props in the docs and make changes in CSS using media queries. This is my implementation so far:

<DateRangePicker
      startDate={startDate}
      startDateId="startDate"
      endDate={endDate}
      endDateId="startDate"
      customInputIcon={customInputIcon}
      onDatesChange={this.onDatesChange}
      focusedInput={focusedInput}
      onFocusChange={this.onFocusChange}
      hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
      appendToBody={true}
      navPrev={navPrev}
      navNext={navNext}
      isOutsideRange={this.isOutsideRange}
    />

which looks like this enter image description here I want to achieve a view like this in tab and mobile devices enter image description here

But not sure about how to do the implementation in this case of responsiveness.

Solution

  • You can achieve that by adding orientation prop

    To differentiate it based on responsiveness, you can do

    const orientation = window.matchMedia("(max-width: 700px)").matches ? 'vertical' : 'horizontal'

    <DateRangePickerWrapper orientation={orientation} autoFocus />