反应日期响应daterangepicker

Question

我在我的一个项目中使用了 Airbnb 的 react-dates 插件。我正在使用像这样的 daterangepicker 默认日历道具 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。我想使用文档中给定的道具来实现这一点，并使用媒体查询对 CSS 进行更改。到目前为止，这是我的实现：

<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}
    />

看起来像这样我想在选项卡和移动设备中实现这样的视图

但不确定这种响应性情况下如何实现。

Answer 1

您可以通过添加 orientation prop

来实现

要根据响应速度区分它，您可以这样做

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

<DateRangePickerWrapper orientation={orientation} autoFocus />

反应日期响应daterangepicker

react-dates responsive daterangepicker

daterangepicker

reactjs

react-dates