反应日期响应日期范围选择器

Question

我在一个项目中使用了Airbnb的react-dates插件。我正在使用类似date http://airbnb.io/react-dates/?path=/story/drp-calendar-props--default这样的daterangepicker默认日历道具。但这在从标签到移动设备的小型设备中没有响应。我想在选项卡和移动视图中进行一些更改，就像它像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道具

来实现

要根据响应度进行区分，您可以

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

<DateRangePickerWrapper orientation={orientation} autoFocus />