как использовать даты и времени в реагировать родной - PullRequest
Новая
       10

как использовать даты и времени в реагировать родной

0 голосов
/ 21 февраля 2020

Я создал собственную форму реагирования и хочу добавить в форму значения средства выбора даты и времени и сохранить их в бэкэнде. Я пробовал несколько библиотек, но не смог.

1 Ответ

0 голосов
/ 21 февраля 2020

Вы можете использовать response-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
  }
});
...