在本机做出反应时，有没有一种方法可以解决示例中的datetimepicker逻辑？

问题描述

这是库：“ @ react-native-community / datetimepicker”

1. 有一种方法可以处理这样的情况：我单击一个日期，然后选择日期，然后按“取消” 因此单击“取消”时会引发错误。
2. 当我选择一个日期时，他不会在选择后显示日期，然后在确认时他不会显示 在字段中显示日期。
3. 我希望默认值为从今天开始的日期（您不能给从今天开始的小日期）直到将来 日期

import React,{ useState } from 'react';
import {
  View,Button,Platform,StyleSheet,TextInput,Text,TouchableOpacity,} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import Icon from 'react-native-ionicons';
const MyDatePicker = () => {
  const today = new Date();
  const [date1,setDate1] = useState(new Date(today));
  const [date2,setDate2] = useState(new Date(today));
  const [mode,setMode] = useState('date');
  const [show1,setShow1] = useState(false);
  const [show2,setShow2] = useState(false);

  const onChange1 = (event,selectedDate) => {
    const currentDate = selectedDate || date;
    setShow1(Platform.OS === 'ios');
    setDate1(currentDate);
  };

  const onChange2 = (event,selectedDate) => {
    const currentDate = selectedDate || date;
    setShow2(Platform.OS === 'ios');
    setDate2(currentDate);
  };

  const showMode1 = (currentMode) => {
    setShow1(true);
    setMode(currentMode);
  };

  const showMode2 = (currentMode) => {
    setShow2(true);
    setMode(currentMode);
  };

  const showDatepicker1 = () => {
    showMode1('date');
  };

  const showDatepicker2 = () => {
    showMode2('date');
  };

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

  return (
    <View style={styles.container}>
      <View style={styles.contents}>
        <View
          style={{
            paddingTop: 20,flexDirection: 'row',justifyContent: 'space-evenly',paddingRight: 10,}}
        >
          <View
            style={{
              paddingTop: 15,paddingRight: 5,}}
          >
            <Text
              style={{ fontWeight: 'bold',fontSize: 18,color: '#368fc7' }}
            >
              frpm
            </Text>
          </View>
          <TouchableOpacity
            onPress={showDatepicker1}
            style={{
              height: 50,width: 150,borderRadius: 5,borderColor: 'black',borderWidth: 2,justifyContent: 'center',alignItems: 'center',}}
          >
            <View
              style={{
                flex: 1,flexDirection: 'row-reverse',}}
            >
              <Icon name="md-calendar" size={27} color="black" />
              <Text
                style={{ fontSize: 20,fontWeight: 'bold',color: '#368fc7' }}
              >
                {date2.toISOString().slice(0,10)}
              </Text>
            </View>
          </TouchableOpacity>
        </View>

        <View
          style={{
            paddingTop: 20,color: '#368fc7' }}
            >
              to
            </Text>
          </View>
          <TouchableOpacity
            onPress={showDatepicker2}
            style={{
              height: 50,10)}
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>

      {show1 && (
        <DateTimePicker
          testID="dateTimePicker"
          timeZoneOffsetInMinutes={0}
          value={date1}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange1}
        />
      )}
      {show2 && (
        <DateTimePicker
          testID="dateTimePicker"
          timeZoneOffsetInMinutes={0}
          value={date2}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange2}
        />
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',backgroundColor: 'white',},contents: {
    flexDirection: 'row',});

export default MyDatePicker;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）