DatePicker

安裝DatePicker

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

使用DatePicker

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

export const App = () => {
  const [date, setDate] = useState(new Date(1598051730000));
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate);
  };

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

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

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

  return (
    <View>
      <View><Button onPress={showDatepicker} title="Show date picker!" /></View>
      <View><Button onPress={showTimepicker} title="Show time picker!" /></View>
      {show && (<DateTimePicker value={date} mode={mode} is24Hour={true} display="default" onChange={onChange} />)}
    </View>
  );
};

做一個MyDatePicker Component

• ios需要額外的modal來呈現關閉的按鈕,android則不用,所以我們可以做一個component來呈現兩種情況

import React, { useState } from "react";
import { View, StyleSheet, Button, TextInput, Text, TouchableWithoutFeedback, Modal, FlatList, Platform } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import DateTimePicker from "@react-native-community/datetimepicker";
import moment from "moment";

function MyDatePicker({ icon, placeholder, onChange, date }) {
  const [modalVisible, setModalVisible] = useState(false);
  const [showPicker, setShowPicker] = useState(false);
  const [newdate, setNewDate] = useState(date);

  const showDatePicker = () => {
    if (Platform.OS === "ios") {
      setModalVisible(true);
    } else {
      setShowPicker(true);
    }
  };

  const onOK = (e, d) => {
    setNewDate(d);
    if (Platform.OS === "android") {
      setShowPicker(false);
    }
    onChange(e, d);
  };

  return (
    <>
      <TouchableWithoutFeedback onPress={() => showDatePicker()}>
        <View style={styles.container}>
          {icon && }
          <MyText style={styles.text}>{newdate ? moment(newdate).format("YYYY-MM-DD") : placeholder}
          <MaterialCommunityIcons name="chevron-down" size={25} color={myColors.medium} />
        </View>
      </TouchableWithoutFeedback>
      <Modal style={styles.modal} visible={modalVisible} animationType="slide" transparent={true}>
        <View style={styles.modalView}>
          <View style={styles.modalBottom}>
            <Button title="close" onPress={() => setModalVisible(false)}>
            <DateTimePicker value={newdate} mode="date" is24Hour={true} display="default" onChange={onOK} locale="zh-TW" />
          </View>
        </View>
      </Modal>
      {showPicker && <DateTimePicker value={newdate} mode="date" is24Hour={true} display="default" onChange={onOK} locale="zh-TW" />}
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    borderRadius: 5,
    flexDirection: "row",
    padding: 10,
    marginHorizontal: 10,
    marginTop: 10,
    alignSelf: "center",
    alignItems: "center",
  },
  icon: {
    marginRight: 10,
  },
  text: {
    flex: 1,
  },
  modalView: {
    backgroundColor: "rgba(0,0,0,0.5)",
    flex: 1,
  },
  modalBottom: {
    height: "50%",
    marginTop: "auto",
    backgroundColor: "white",
  },
});

export default MyDatePicker;