【React Native】日付・時刻ピッカー（DateTimePicker）の表示方法を解説

React Nativeアプリで日付や時刻を選択できるピッカー（DateTimePicker）を表示するには、まず専用のパッケージをインストールする必要があります。プロジェクトのルートディレクトリで以下のコマンドを実行してください。

npm install @react-native-community/datetimepicker --save

インストールが完了したら、まずは日付ピッカー（DatePicker）の表示方法から見ていきましょう。

例：React NativeでのDateTimePickerの使い方

はじめに、次のようにDateTimePickerコンポーネントをインポートします。

import DateTimePicker from '@react-native-community/datetimepicker';

基本的なDateTimePickerコンポーネントの記述例は以下のとおりです。

<DateTimePicker testID="dateTimePicker" value={mydate} mode={displaymode} is24Hour={true} display="default" onChange={onChangeFunc} />

ここで、DateTimePickerの主なプロパティ（props）を確認しておきましょう。

この例では、現在の日付を初期値として使用し、モードを「date」に設定しています。

const [mydate, setDate] = useState(new Date());
const [displaymode, setMode] = useState('date');

DateTimePickerコンポーネントは次のように記述します。

<DateTimePicker
    value={mydate}
    mode={displaymode}
    is24Hour={true}
    display="default"
    onChange={changeSelectedDate}
/>

日付ピッカーの完全なコード例

import React, {useState} from 'react';
import {View, Button, Platform, SafeAreaView, StyleSheet} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function App() {
    const [mydate, setDate] = useState(new Date());
    const [displaymode, setMode] = useState('date');
    const [isDisplayDate, setShow] = useState(false);

    const changeSelectedDate = (event, selectedDate) => {
        const currentDate = selectedDate || mydate;
        setDate(currentDate);
    };

    const showMode = (currentMode) => {
        setShow(true);
        setMode(currentMode);
    };

    const displayDatepicker = () => {
        showMode('date');
    };

    return (
        <SafeAreaView style={styles.container}>
            <View>
                <Button onPress={displayDatepicker} title="Show date picker!" />
            </View>
            {isDisplayDate && (
                <DateTimePicker
                    testID="dateTimePicker"
                    value={mydate}
                    mode={displaymode}
                    is24Hour={true}
                    display="default"
                    onChange={changeSelectedDate}
                />
            )}
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
});

実行結果

画面上の「Show Date Picker」ボタンをタップすると、日付ピッカーが表示されます。

時刻ピッカーを表示する方法

続いて、時刻ピッカー（Time Picker）の表示方法を見ていきましょう。実装はとてもシンプルで、モードを「time」に変更するだけでOKです。以下がその完全なコード例です。

import React, {useState} from 'react';
import {View, Button, Platform, SafeAreaView, StyleSheet} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function App() {
    const [mydate, setDate] = useState(new Date());
    const [displaymode, setMode] = useState('time');
    const [isDisplayDate, setShow] = useState(false);

    const changeSelectedDate = (event, selectedDate) => {
        const currentDate = selectedDate || mydate;
        setDate(currentDate);
    };

    const showMode = (currentMode) => {
        setShow(true);
        setMode(currentMode);
    };

    const displayTimepicker = () => {
        showMode('time');
    };

    return (
        <SafeAreaView style={styles.container}>
            <View>
                <Button onPress={displayTimepicker} title="Your Time Picker" />
            </View>
            {isDisplayDate && (
                <DateTimePicker
                    value={mydate}
                    mode={displaymode}
                    is24Hour={true}
                    display="default"
                    onChange={changeSelectedDate}
                />
            )}
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
});

「Your Time Picker」ボタンをタップすると、時刻ピッカーが表示されます。