react-dates

ウェブ向けのアクセシブルで、容易に国際化でき、モバイルフレンドリーな日付選択ライブラリ
11,472
開発者Maja Wichrowska

React-datesはReact用の日付選択ライブラリです。Airbnbで開発され、後に独立組織に移管されました。

ライブプレイングラウンド

動作中の日付選択の例については、http://react-dates.github.io/react-datesをご覧ください。

デモを自分のコンピュータで実行するには

  • npm install
  • npm run storybook
  • https://:9001/にアクセスしてください

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プロパティは、2つの入力のプレースホルダーです。

  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,

国際化：英語のデフォルト設定は適切ですが、世界には英語以外の言語もたくさんあることを理解しています！:) Airbnbでは、ユーザーの50％以上が英語以外の言語で当社のサイトにアクセスしています。したがって、momentロケールをサポートすることに加えて、DateRangePickerはこれを可能にするための多くのプロパティを受け入れます。

monthFormatプロパティはmomentの日付書式ルールに従い、各カレンダーの上部に日付を表示する形式を示します。デフォルトはMMMM YYYYです。

  monthFormat: PropTypes.string,

phrasesプロパティは、現在クラスに含まれているすべての英語のフレーズを含むオブジェクトです。現時点では、そのようなフレーズは2つだけで、どちらも表示されませんが、日付選択のスクリーンリーダーナビゲーションに使用されます。

  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）をインポートします。

リンク