React Nativeによるアプリ開発において、UIコンポーネントの導入は珍しいものではない。むしろポピュラーとまで感じるほどではないだろうか。なかでもNativeBaseが、もっとも高名なUIコンポーネントだといえる。

そんなNativeBaseのコンポーネント群に日付選択を手助けするものがある。DatePickerだ。

NativeBaseのDatePickerコンポーネントは、IOSとAndroidのプラットフォームを判定して専用のDatePickerをレンダリングしてくれる。IOSならばDatePickerIOSコンポーネントで、AndroidならばDatePickerAndroid APIが呼び出されるわけだ。

NativeBaseのDatePickerコンポーネントの実装は、公式ドキュメントのとおり記述すれば、なんの問題もなく配置できることだろう。ところがDatePickerコンポーネントの日付表記が英語圏のものと気づいて戸惑うかもしれない。

このエントリーでは、NativeBaseのDatePickerコンポーネントの日付表記を日本語形式フォーマットする方法を紹介したい。

解決法

さっそく解決法を示そう。サンプルソースコードとして公式ドキュメントのものを拝借して、そこに追記している。では下記ソースコードを確認してほしい。

import React, { Component } from 'react';
import { Container, Header, Content, DatePicker, Text } from 'native-base';
import moment from 'moment'; // 👈
export default class DatePickerExample extends Component {
  constructor(props) {
    super(props);
    this.state = { chosenDate: new Date() };
    this.setDate = this.setDate.bind(this);
  }
  setDate(newDate) {
    this.setState({ chosenDate: newDate });
  }
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <DatePicker
            defaultDate={new Date(2018, 4, 4)}
            minimumDate={new Date(2018, 1, 1)}
            maximumDate={new Date(2018, 12, 31)}
            locale={"en"}
            timeZoneOffsetInMinutes={undefined}
            modalTransparent={false}
            animationType={"fade"}
            androidMode={"default"}
            placeHolderText="Select date"
            textStyle={{ color: "green" }}
            placeHolderTextStyle={{ color: "#d3d3d3" }}
            onDateChange={this.setDate}
            disabled={false}
            formatChosenDate={ date => moment(date).format('YYYY年MM月DD日') } // 👈
            />
            <Text>
              Date: {this.state.chosenDate.toString().substr(4, 12)}
            </Text>
        </Content>
      </Container>
    );
  }
}

追記した箇所は、2行だ。

まずソースコード上部にimport moment from 'moment';としてMoment.jsをインポートしている。Moment.jsは日付時刻操作ライブラリで、フォーマットするときなどに使う。

つづいて<DatePicker />にformatChosenDate={ date => moment(date).format('YYYY年MM月DD日') }としてformatChosenDate propsを用意している。これは日付フォーマット用のpropsで、DatePickerコンポーネント内で参照されている。もしformatChosenDate propsが存在しなければ英語圏の日付表記が適用される仕組みだったわけだ。

まとめ

NativeBaseのDatePickerコンポーネントの日付表記を日本語形式にフォーマットする方法の紹介だった。

そもそも公式ドキュメントにformatChosenDate propsの記述がない。DatePickerコンポーネントの実ソースコードを眺めていて発見したものだ。

もしまだ実装の時でないならば、頭の片隅に入れておいてほしい。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。