android - 如何在本机反应中在文本输入中显示选定的日期和时间
问题描述
我正在开发一个 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();
};
推荐阅读
- c# - 在 Nunit 控制台上运行 Specflow 3.0 报告
- django - Django 教程。通用视图。context_object_name = 'latest_question_list'
- java - Java Rsocket 流式客户端
- python - 使用 Flask 和 Python 处理单击按钮
- javascript - 如何获取javascript对象值?
- reactjs - 如何在拖动时滚动页面反应dnd
- javascript - 访问我的网站时边缘浏览器自动关闭
- android - 处理 xamarin.forms 上的 iOS 和 Android 差异
- xaml - 如何制作具有扩展中心列和可变宽度左/右列的 3 列 Xamarin.Forms FlexLayout?
- javascript - 有没有办法在 WordPress 文章的 html 代码中使用 JavaScript 脚本?