【React Native】日時を一度に設定できるピッカーライブラリ「react-native-date-picker」

以前の「【React Native】DatePickerを実装できるライブラリ「react-native-modal-datetime-picker」」という記事で、React Native の DatePicker ライブラリを紹介しましたが、今回は日時を一度に設定できるライブラリ「react-native-date-picker」のご紹介です。

GitHub のページはこちらから。

GitHub – henninghall/react-native-date-picker: React Native Date Picker is datetime picker for Android and iOS. It includes date, time and datetime picker modes. The datepicker is customizable and is supporting different languages. It’s written with native code to achieve the best possible look, feel and performance.
https://github.com/henninghall/react-native-date-picker

ライブラリのインストールは下記のコマンドで行います。

npm install react-native-date-picker --save

サンプルコードは下記のとおりです。

import { Button } from 'react-native';
import DatePicker from 'react-native-date-picker';

<Button
  title="日時を設定する"
  onPress={() => this.setState({ isShowDatepicker: true })} />
<DatePicker modal locale='ja'
  open={this.state.isShowDatepicker}
  date={this.state.date}
  title='日時を設定する'
  confirmText='OK'
  cancelText="キャンセル"
  onConfirm={(date) => {
    this.setState({ 
      date: date,
      isShowDatepicker: false,
    });
  }}
  onCancel={() => {
    this.setState({ isShowDatepicker: false, });
  }} />

「日時を設定する」ボタンをタップしたら、日時を指定できる Picker が表示されます。

GitHub のサンプルコードとほぼ同じですが、Picker のタイトルと OK、キャンセルボタンの文言を指定し、locale も日本に設定しています。
デフォルト値でも動作はするのですが、タイトルなどが英語表記なのでこちらの方が親切かなと思います。

また、今回は日時設定をモーダルで表示するようにしていますが、常に画面に表示したい場合はインラインで表示することもできます。
その場合は、下記のように <DatePicker> を変更してください。

<DatePicker locale='ja'
  date={this.state.date}
  onDateChange={(date) => this.setState({ date: date })} />

なお、今回は使いませんでしたが、mode を指定することで、日付だけ、時刻だけの設定ができるように変更することもできます。
こちらは「react-native-modal-datetime-picker」ライブラリでも同じものが実装できます。

以上、React Native で日時を同時に設定できるピッカーライブラリ「react-native-date-picker」のご紹介でした。
ご参考になれば幸いです。