[英]How to show selected date and time in textinput in react native
我正在開發一個 react-native 應用程序。 我正在其中使用日期時間選擇器。 我的問題是我想在選擇日期和時間后立即在 textInput 中顯示日期時間選擇器中選擇的日期和時間......如何做到這一點。 這是我的代碼
import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';
export default class App extends React.Component {
constructor(props){
super(props)
this.state=({
isDateTimePickerVisible: false,
selecteddate:''
})
}
_showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });
_hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });
_handleDatePicked = (pickeddate) => {
day = pickeddate.getDate();
month = pickeddate.getMonth();
year = pickeddate.getFullYear();
console.log('A date has been picked: ' + day + '-' + month + '-' + year);
exdate= day + '-' + month + '-' + year
this._hideDateTimePicker();
};
onFocus = () => {
this._handleDatePicked();
}
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<TextInput
placeholder="placeholder..."
onFocus={ () => this._showDateTimePicker() }
value={this.state.selecteddate}
/>
{/* //--------------------------------------DateTimePicker */}
<DateTimePicker
isVisible={this.state.isDateTimePickerVisible}
onConfirm={this._handleDatePicked}
onCancel={this._hideDateTimePicker}
mode={'date'}
datePickerModeAndroid={'spinner'}
/>
{/* //-------------------------------------- */}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
您只是忘了在_handleDatePicked方法中添加設置狀態!
_handleDatePicked = (pickeddate) => {
day = pickeddate.getDate();
month = pickeddate.getMonth();
year = pickeddate.getFullYear();
console.log('A date has been picked: ' + day + '-' + month + '-' + year);
exdate= day + '-' + month + '-' + year
this.setState({selecteddate : day + '-' + month + '-' + year})
this._hideDateTimePicker();
};
您必須在_handleDatePicked()中設置所選狀態
_handleDatePicked = (pickeddate) => {
+ this.setState({selecteddate : day + '-' + month + '-' + year})
}
你很好!
let exdate =
`${current.getFullYear()}-${current.getMonth()}-${current.getDate()}`
this.setState({date:exdate});
this.hidePicker();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.