如何在 React Native 中使用日期和时间选择器

Question

我创建了一个反应本机表单，我想将日期和时间选择器值添加到表单中并将它们保存到后端。我尝试了几个库但失败了。

Answer 1

您可以使用react-native-modal-datetime-picker

# using npm
$ npm i react-native-modal-datetime-picker @react-native-community/datetimepicker

# using yarn
$ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker

示例

import React, { useState } from "react";
import { Button, View } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

const Example = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = date => {
    console.warn("A date has been picked: ", date);
    hideDatePicker();
  };

  return (
    <View>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
    </View>
  );
};

export default Example;

您的问题的简单示例

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import DateTimePicker from "react-native-modal-datetime-picker";

export default class ExampleClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDatePickerVisible: false,
      pickedDate: ""
    };
  }

  //Date Picker handling methods
  hideDatePicker = () => {
    this.setState({ isDatePickerVisible: false });
  };

  handleDatePicked = date => {
    const mdate = date.toString().split(" ");
    this.setState({
      pickedDate: mdate[1] + " " + mdate[2] + ", " + mdate[3]
    });
    this.hideDatePicker();
  };

  showDatePicker = () => {
    this.setState({ isDatePickerVisible: true });
  };

  render() {
    return (
      <View style={styles.container}>
        {/* Your View Here */}
        <DateTimePicker
          mode="date"
          isVisible={this.state.isDatePickerVisible}
          onConfirm={this.handleDatePicked}
          onCancel={this.hideDatePicker}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

Answer 2

工作量很大，但是我可以总结一下。即使您开始使用日期时间。您仍然需要将 React Native 时间戳转换为日期和时间。然后你必须将 24 小时时间转换为 12 小时时间，然后日期像 dd/mm/yyyy 一样向后，所以你最终也必须将其切换为 mm/dd/yyyy。但这是整个解决方案！请评论任何修复。我想应该是完美的。

进口：

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

状态：

const [date, setDate] = useState(new Date());
const [chosenDate, setChosenDate] = useState("Empty");

onChange 方法：

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

// This maintains the current date after Selection!
setDate(currentDate);

let tempDate = new Date(currentDate);
let fDate = tempDate.getDate() + '/' + (tempDate.getMonth() + 1) + '/' + tempDate.getFullYear();

let hour = tempDate.getHours()
let minutes = tempDate.getMinutes()
let meridian = "AM"  // AM or PM


if (hour >= 12) {
  hour = hour - 12;
  meridian = "PM";
}
if (hour == 0) {
  hour = 12;
}

const splited = fDate.split('/');
const dateProper = [splited[1]+"/" + splited[0] +"/" + splited[2]];

setChosenDate(dateProper + '\n' + hour+":"+minutes+" "+meridian)
console.log(dateProper + '\n' + hour+":"+minutes+" "+meridian)
}

JSX：

<Text style={{
    fontWeight: "bold",
    fontSize: 16,
    paddingTop:8
  }}>Start Date and Time</Text>

  <DateTimePicker
    testID="dateTimePicker"
    value={date || new Date()}
    mode="datetime"
    display="default"
    is24Hour={true}
    onChange={onChange}
    textColor="#fff"
    style={{ padding:10 }}
  />