react-dates

一個易於存取、容易國際化、對行動裝置友善的網頁日期選擇器函式庫
11,472
作者Maja Wichrowska

React-dates 是一個用於 React 的日期選擇器函式庫。它最初在 Airbnb 開發，後來轉移到一個獨立的組織。

線上遊樂場

如需查看日期選擇器的實際範例，請前往http://react-dates.github.io/react-dates。

若要在您自己的電腦上執行該示範

API

我們提供了一些不同的元件和工具，以滿足您所有的日期選擇需求！

DateRangePicker

這個完全受控的元件旨在讓使用者選擇開始日期和結束日期。它最適合用於選擇未來一年內相對較短的日期範圍。

屬性 (Props)

日期：代表目前選定的開始日期和結束日期的 Moment 物件。若要表示尚未選擇日期，這些值會設定為 null。

  startDate: momentPropTypes.momentObj
  endDate: momentPropTypes.momentObj

onDatesChange 是必要的 callback，用於更新父元件中持有的日期狀態，並將其傳回給 DateRangePicker 作為 props。onDatesChange 接收一個物件，其格式為 { startDate: momentPropTypes.momentObj, endDate: momentPropTypes.momentObj } 作為參數。

  onDatesChange: PropTypes.func

焦點：focusedInput prop 表示目前哪個輸入欄位處於焦點狀態（如果有的話）。您可以從 react-dates/constants 匯入 START_DATE 和 END_DATE 常數。

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

onFocusChange 是必要的 callback，用於更新父元件中持有的焦點狀態，並將其傳回給 DateRangePicker 作為 prop。onFocusChange 接收 START_DATE、END_DATE 或 null 作為參數。

  onFocusChange: PropTypes.func

日期選擇規則

minimumNights 的值表示開始日期和結束日期之間的最短天數。

  minimumNights: PropTypes.number

若要表示哪些日期被禁止選擇，您可以向 isDayBlocked prop 提供一個函式。 從 v1.0.0 開始，我們允許在範圍內使用被封鎖的日期。

  isDayBlocked: PropTypes.func

isOutsideRange 表示哪些日期超出可選擇的範圍。 預設情況下，過去的日期超出範圍。 如果您希望使用者可以選擇過去的日期，您可以將 isOutsideRange 設定為 () => true。

  isOutsideRange: PropTypes.func

日曆呈現方式

numberOfMonths 表示一次顯示的月份數量。

  numberOfMonths: PropTypes.number

預設情況下，我們不會在與目前可見月份相同的表格中顯示上個月和下個月的日期。 然而，有時，尤其是當 numberOfMonths prop 設定為 1 時，讓使用者也可以看到這些日期可能更有意義。 若要執行此操作，您可以將 enabledOutsideDays 設定為 true。 仍然可以通過選擇 CalendarMonth__day--outside 類別來設定這些日期的樣式。

  enableOutsideDays: PropTypes.bool

DayPicker 呈現方式： orientation prop 表示月份是堆疊在彼此上方還是並排顯示。您可以從 react-dates/constants 匯入 HORIZONTAL_ORIENTATION 和 VERTICAL_ORIENTATION 常數。

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

withPortal 專為行動裝置設計。也就是說，如果將此 prop 設定為 true，則 DayPicker 將在螢幕中央、目前平面上方呈現，背景為透明黑色。點擊背景將隱藏 DayPicker。 此選項目前僅適用於具有水平方向的 DateRangePicker。

  withPortal: PropTypes.bool

withFullScreenPortal 是 withPortal prop 的全螢幕接管版本。 與 withPortal 類似，DayPicker 會在螢幕中央、目前平面上方呈現。 但是，背景不是可點擊的透明黑色，而是實心的白色。 若要關閉日期選擇器，使用者必須選擇日期或點擊位於螢幕右上角的關閉按鈕。

  withFullScreenPortal: PropTypes.bool

輸入呈現方式： startDateId 和 endDateId props 會基於可存取性的原因指派給實際的 <input> DOM 元素。它們預設為 START_DATE 和 END_DATE 常數的值。

  startDateId: PropTypes.string
  endDateId: PropTypes.string

startDatePlaceholderText 和 endDatePlaceholderText props 是兩個輸入欄位的預留位置。

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

如果將 showClearDates prop 設定為 true，則輸入框中會出現一個 x，可讓您清除兩個日期並重設輸入。

  showClearDates: PropTypes.bool,

如果將 disabled prop 設定為 true，則在叫用 onStartDateFocus 或 onEndDateFocus 時不會叫用 onFocusChange，並且會將 disabled 指派給實際的 <input> DOM 元素。

  disabled: PropTypes.bool,

一些有用的 callbacks：如果您需要在使用者在月份之間導覽時執行某些操作（例如，檢查列表的可用性），您可以使用 onPrevMonthClick 和 onNextMonthClick props 來執行此操作。

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

國際化：雖然我們為英文提供了合理的預設值，但我們知道這不是世界上唯一的語言！ :) 在 Airbnb，超過 50% 的使用者會以英文以外的語言瀏覽我們的網站。因此，除了支援 moment 地區設定之外，DateRangePicker 還接受許多 props 來允許這樣做。

monthFormat prop 遵循 moment 的日期格式化規則，並指示在每個日曆頂部顯示日期的格式。 它預設為 MMMM YYYY。

  monthFormat: PropTypes.string,

phrases prop 是一個物件，其中包含目前屬於此類別的所有英文短語。 到目前為止，我們只有兩個這樣的短語，它們都不可見，但它們用於螢幕閱讀器導覽日期選擇器。

  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）。

連結