react-dates

一个易于访问、易于国际化、移动友好的网页日期选择器库
11,472
作者Maja Wichrowska

React-dates 是一个用于 React 的日期选择器库。它最初由爱彼迎开发，之后转移到一个独立的组织。

在线演示

查看日期选择器示例，请访问 http://react-dates.github.io/react-dates。

在您自己的电脑上运行演示

API

我们提供了一些不同的组件和工具，以满足您所有日期选择的需要！

DateRangePicker

这个完全受控的组件允许用户选择起始日期和结束日期。它最适合选择未来一年内的相对较短的日期范围。

属性

日期：表示当前选择的起始日期和结束日期的 Moment 对象。若未选择日期，则设置为null。

  startDate: momentPropTypes.momentObj
  endDate: momentPropTypes.momentObj

onDatesChange 是必要的回调函数，用于更新父组件中保存的日期状态，并将该状态传递回DateRangePicker作为属性。onDatesChange接收一个{ startDate: momentPropTypes.momentObj, endDate: momentPropTypes.momentObj }形式的对象作为参数。

  onDatesChange: PropTypes.func

焦点：focusedInput 属性指示当前哪个输入框（如果有）处于焦点状态。您可以从react-dates/constants导入START_DATE和END_DATE常量。

  focusedInput: PropTypes.oneOf([START_DATE, END_DATE])

onFocusChange 是必要的回调函数，用于更新父组件中保存的焦点状态，并将该状态传递回DateRangePicker作为属性。onFocusChange接收START_DATE、END_DATE或null作为参数。

  onFocusChange: PropTypes.func

日期选择规则

minimumNights的值表示起始日期和结束日期之间的最小天数。

  minimumNights: PropTypes.number

要指示哪些日期被阻止选择，您可以向isDayBlocked属性提供一个函数。从v1.0.0版本开始，我们允许在日期范围内设置被阻止的日期。

  isDayBlocked: PropTypes.func

isOutsideRange 指示哪些日期超出可选择范围。默认情况下，过去的日期超出范围。如果您想允许用户选择过去的日期，可以将isOutsideRange设置为() => true。

  isOutsideRange: PropTypes.func

日历显示

numberOfMonths 指示一次显示的月份数量。

  numberOfMonths: PropTypes.number

默认情况下，我们不会在与当前可见月份相同的表格中显示上个月和下个月的日期。但是，有时，尤其是在numberOfMonths属性设置为1时，允许用户查看这些日期可能更有意义。为此，您可以将enabledOutsideDays设置为true。这些日期仍然可以通过选择CalendarMonth__day--outside类进行样式设置。

  enableOutsideDays: PropTypes.bool

DayPicker 显示：orientation 属性指示月份是堆叠在一起还是并排显示。您可以从react-dates/constants导入HORIZONTAL_ORIENTATION和VERTICAL_ORIENTATION常量。

  orientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION])

withPortal专为移动设备设计。具体来说，如果将此属性设置为true，则DayPicker将以居中的方式显示在屏幕上，位于当前平面上方，其下方为透明黑色背景。点击背景将隐藏DayPicker。此选项目前仅适用于水平方向的DateRangePicker。

  withPortal: PropTypes.bool

withFullScreenPortal是withPortal属性的全屏版本。与withPortal类似，DayPicker以居中的方式显示在屏幕上，位于当前平面上方。但是，背景不是可点击的透明黑色，而是实心的白色。要关闭日期选择器，用户必须选择一个日期或点击位于屏幕右上角的关闭按钮。

  withFullScreenPortal: PropTypes.bool

输入显示：出于辅助功能方面的考虑，startDateId和endDateId属性被分配给实际的<input> DOM 元素。它们默认为START_DATE和END_DATE常量的值。

  startDateId: PropTypes.string
  endDateId: PropTypes.string

startDatePlaceholderText和endDatePlaceholderText属性是两个输入框的占位符。

  startDatePlaceholderText: PropTypes.string,
  endDatePlaceholderText: PropTypes.string,

如果将showClearDates属性设置为true，则输入框中会出现一个x，允许您清除两个日期并重置输入。

  showClearDates: PropTypes.bool,

如果将disabled属性设置为true，则当调用onStartDateFocus或onEndDateFocus时，不会调用onFocusChange，并且disabled被分配给实际的<input> DOM 元素。

  disabled: PropTypes.bool,

一些有用的回调函数：如果您需要在用户在月份之间导航时执行某些操作（例如，检查房源的可用性），您可以使用onPrevMonthClick和onNextMonthClick属性。

  onPrevMonthClick: PropTypes.func,
  onNextMonthClick: PropTypes.func,

国际化：虽然我们为英语提供了合理的默认值，但我们知道世界上不止一种语言！:) 在爱彼迎，超过50%的用户使用非英语语言访问我们的网站。因此，除了支持 moment 本地化之外，DateRangePicker还接受许多属性以实现这一点。

monthFormat属性遵循moment 的日期格式化规则，并指示在每个日历顶部显示日期的格式。默认为MMMM YYYY。

  monthFormat: PropTypes.string,

phrases属性是一个对象，包含当前类中所有英语短语。目前，我们只有两个这样的短语，而且都不是可见的，但它们用于日期选择器的屏幕阅读器导航。

  phrases: PropTypes.shape({
    closeDatePicker: PropTypes.node,
    clearDates: PropTypes.node,
  }),

主题

react-dates 带有一组可以覆盖的 SCSS 变量，以添加您自己的项目特定主题。使用您自己的变量覆盖css/variables.scss中找到的任何变量，然后导入~react-dates/css/styles.scss（如果您只覆盖几个变量，则导入~react-dates/css/variables.scss）。

链接