Блог

Я использую средство выбора даты и времени expo, и оно отлично работает, если я нажимаю на него только один раз. Если я дважды нажму на него, это выдаст мне следующую ошибку:

Ошибка типа: value.getTime не является функцией. (В ‘value.getTime()’, ‘value.getTime’ не определено)

Эта ошибка находится по адресу: в RNDateTimePicker (в MyDateTimePicker.js:52)

Это мой инструмент выбора даты и времени:

 import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Image, Button, StyleSheet, TouchableOpacity } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import Moment from 'moment';

export default function MyDateTimePicker(props) {
  console.log("my date time picker props: ", props);
  const title = props.title;
  const [date, setDate] = useState(new Date());
  const [time, setTime] = useState(new Date());
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);
  const [text, setText] = useState(Moment(date).format('DD MMM YYYY HH:mm'));

  const onChange = (event, selectedValue) => {
    setShow(Platform.OS === 'ios');
    if (mode == 'date') {
     const currentDate = selectedValue || new Date();
     setDate(new Date(currentDate));
     setMode('time');
     setShow(Platform.OS !== 'ios'); // to show time
   } else {
     const currentTime = selectedValue || new Date();
     setDate(date.setTime(currentTime.getTime()));
     setShow(Platform.OS === 'ios'); // to hide back the picker
     setMode('date'); // defaulting to date for next open
   }
   props.updateDate(date);
  };

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

  const showDatepicker = () => {
    console.log("show date picker");
    showMode('date');
  };

  const showTimepicker = () => {
    console.log("show time picker");
    showMode('time');
  };

  return(
    <View style={styles.viewStyle}>
      <TouchableOpacity onPress={showDatepicker}>
        <Text style={styles.inputStyle}>{text}</Text>
      </TouchableOpacity>
      {show amp;amp; (
        <DateTimePicker
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
          minimumDate={new Date()}
          showTimeSelect
        />
      )}
    </View>
  )
}
 

И вот как я это использую:

 <MyDateTimePicker updateDate={(date) => this.handleDate(date)} />
 

Где

 handleDate(date) {
    this.setState({date: date});
  }
 

Опять же, если я нажму на средство выбора даты и времени только один раз, все будет работать нормально, но если я попытаюсь выбрать вторую дату, она сломается, и я не понимаю, почему.

Проблема здесь:

  setDate(date.setTime(currentTime.getTime()));
 

setTime возвращает количество секунд, прошедших с 01.01.1970 (когда мир был создан с точки зрения разработчиков javascript), но средство выбора данных ожидает дату, а не число, поэтому оно пытается вызвать getTime номер, что не очень хорошо.

Я не знаком с этим конкретным средством выбора данных, но если вы уверены, что оно теряет часть даты в режиме «время», попробуйте

 setDate(new Date(date.getTime() currentTime.getTime()));
 

если этого будет достаточно, чтобы перенести вас слишком далеко в будущее setDate(currentTime) (это относится только к режиму «время», часть «дата» подойдет)

Я был полностью озадачен этой же ошибкой в течение некоторого времени, используя библиотеку react-native-datetimepicker.

Для меня это сработало так, что я вручную создал дату в требуемом формате и передал ее в средство выбора даты. По какой-то причине использование moment().toISOString() у меня не сработало, хотя формат такой же, как и в средстве выбора даты после изменения даты или времени.

Код выглядит примерно так:

 const [customDate, setCustomDate] = useState(null);

useEffect(() => {
  const year = new Date().getFullYear();
  const month = new Date().getMonth();
  const date = new Date().getDate();
  const currentTime = new Date(year, month, date, 8, 11, 0);

  setCustomDate(currentTime);
}, []);

const selectDate = (event, selectedDate) => {
  const date = selectedDate || customDate;
  setCustomDate(date);
};

<DateTimePicker mode="date" value={customDate} onChange={selectDate} />
 

Для компонента класса datetimepicker

  class Productdetails extends Component {
                  constructor(props) {
                    super();
                this.state = {
            rentStartDate: new Date(),
                      startDate: "",
                      endDate: "",
                      mode: false,}
        this.onChangeStart = this.onChangeStart.bind(this);
        }
     onChangeStart(event, selectedDate) {
        let currentDate = selectedDate || this.state.rentStartDate;
        this.setState({ show: Platform.OS === "ios", rentStartDate: currentDate });
        let mydate = JSON.stringify(currentDate)
          .split("T")[0]
          .trim()
          .replace('"', "");
    
        this.setState({ startDate: mydate });
      }
     showMode(currentMode) {
        this.setState({
          show: true,
          mode: currentMode,
        });
      }
    
    return(<View style={{ flex: 1}}>
                  <Text style={{ textAlign: "center" }}>Start Date</Text>
                  <View
                    style={{
                      flex: 1,
                      flexDirection: "row",
                      justifyContent: "space-between",
                      alignItems: "center",
                      marginBottom: 5,
                      height: 40,
                      borderRadius: 2,
                      color: "black",
                      borderColor: "rgba(38, 38, 38,0.8)",
                      borderWidth: 1,
                      backgroundColor: "white",
                      paddingEnd: 5,
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 14,
                        paddingLeft: 5,
                        backgroundColor: "white",
                        color: "black",
                      }}
                    >
                      {this.state.startDate}
                    </Text>
                    <TouchableHighlight onPress={() => this.showMode("date")}>
                      <Image
                        source={require("../images/calender.png")}
                        style={{ height: 24, width: 24 }}
                      />
                    </TouchableHighlight>
                    <Overlay
                      isVisible={this.state.show}
                      onBackdropPress={() => {
                        this.setState({ show: false });
                      }}
                    >
                      <DateTimePicker
                        testID="dateTimePicker"
                        value={this.state.rentStartDate}
                        mode={this.state.mode} //The enum of date, datetime and time
                        placeholder="select date"
                        format="DD-MM-YYYY"
                        confirmBtnText="Confirm"
                        cancelBtnText="Cancel"
                        timeZoneOffsetInMinutes={undefined}
                        modalTransparent={false}
                        animationType={"fade"}
                        display="default"
                        onChange={this.onChangeStart}
                        style={{ width: 320, backgroundColor: "white" }}
                      />
                    </Overlay>
                  </View>
                  <View></View>
                </View>)
export default React.memo(Productdetails);