如何在react native的文本输入中显示选定的日期和时间

rjee0c15  于 2022-12-04  发布在  React
关注(0)|答案(3)|浏览(119)

我正在开发一个React原生应用。我在里面使用了一个日期时间选择器。我的问题是我想在选择日期和时间后立即在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',
  },
});
fbcarpbf

fbcarpbf1#

您只是忘记在_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();
          };
3b6akqbq

3b6akqbq2#

您必须在your _handleDatePicked()中设置选定状态

_handleDatePicked = (pickeddate) => {
+    this.setState({selecteddate : day + '-' + month + '-' + year})
  }

你可以走了!

sauutmhj

sauutmhj3#

_handleDatePicked =(当前)=〉{
设exdate = ${current.getFullYear()}-${current.getMonth()}-${current.getDate()}这个.设置状态({日期:exdate});();
}

相关问题