1

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

看起来像这样 在此处输入图像描述 我想在标签和移动设备中实现这样的视图 在此处输入图像描述

但不确定在这种响应性的情况下如何执行。

4

1 回答 1

3

您可以通过添加orientation道具来实现

要根据响应能力区分它，您可以这样做

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

<DateRangePickerWrapper orientation={orientation} autoFocus />

于 2020-07-30T06:03:13.543 回答