使用react本机日期时间选择器两次会出现错误吗

Question

我使用expo的日期时间选择器，如果我只点击一次，它会非常好地工作。如果我点击它两次，它会给我以下错误：

TypeError: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 && (
<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});
}

同样，如果我只点击一次日期-时间选择器，一切都很好，但如果我试图选择第二个日期，它就会中断，我不明白为什么。

Answer 1

问题就在这里：

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

setTime返回从1970年1月1日开始的秒数(从javascript开发人员的角度来看，这是世界创建的时间(，但数据选择器期望的是Date，而不是number，因此它试图对数字调用getTime，但这并不顺利。

我不熟悉这个特定的数据选择器，但如果你确定它在"时间"模式下会丢失日期部分，请尝试

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

如果这让你在未来走得太远，setDate(currentTime)可能就足够了(这只适用于"时间"模式，"日期"部分可以(

Answer 2

在使用react本机日期时间选择器库的一段时间里，我完全被这个错误难住了。

对我来说，它的工作方式是我以所需的格式手动创建日期，并将其传递给日期选择器。由于某种原因，使用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} />

Answer 3

对于类组件日期时间选择器

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);