我正在使用React本地模态日期时间选择器给用户来选择日期时间.我正在检查如果时间是过去的时间那么现在它将不会被授予.他必须再次选择.但是当我选择一个以前的时间.那么想要再次选择模态不工作.为什么?
这是我的主要组件
_showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });
_hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });
_handleDatePicked = date => {
console.log("A date has been picked: ", date);
if (Date.now() > Date.parse(date)) {
console.log(" please select a future time");
} else {
this.setState({ orderDate: date });
this._hideDateTimePicker();
}
};
<SelectDate
orderDate={this.state.orderDate}
isDateTimePickerVisible={this.state.isDateTimePickerVisible}
_showDateTimePicker={this._showDateTimePicker}
_handleDatePicked={this._handleDatePicked}
_hideDateTimePicker={this._hideDateTimePicker}
/>
选择日期组件
import React from "react";
import { View, Text } from "react-native";
import DateTimePicker from "react-native-modal-datetime-picker";
import {
Container,
Content,
Header,
Item,
Input,
Icon,
Button,
Body
} from "native-base";
class SelectDate extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
_showDateTimePicker = () => {
this.props._showDateTimePicker();
};
_handleDatePicked = date => {
this.props._handleDatePicked(date);
};
_hideDateTimePicker = () => {
this.props._hideDateTimePicker();
};
render() {
return (
<View>
<View>
<View
style={{
flex: 1,
backgroundColor: "#fff",
marginLeft: 15,
marginRight: 15
}}
>
<View style={{ alignSelf: "center", margin: 10, height: 20 }}>
{this.props.orderDate === "NO Date Time Selected" ? (
<Text style={{ color: "#000" }}>{this.props.orderDate}</Text>
) : (
<Text style={{ color: "#000" }}>
{this.props.orderDate.toLocaleString()}
</Text>
)}
</View>
<Button block onPress={this._showDateTimePicker}>
<Text style={{ color: "red", fontSize: 16 }}>
* Select Date and Time{" "}
</Text>
</Button>
<DateTimePicker
isVisible={this.props.isDateTimePickerVisible}
onConfirm={this._handleDatePicked}
onCancel={this._hideDateTimePicker}
mode="datetime"
is24Hour={false}
/>
</View>
</View>
</View>
);
}
}
export default SelectDate;
1条答案
按热度按时间uqzxnwby1#
您需要发送日期到函数onClick事件,这是解决方案:
onConfirm={(date)=>this._handleDatePicked(date)}