Afficher le sélecteur de date dans la zone de texte en react native

Question

J'utilise react-native-datepicker pour afficher le sélecteur de date. Mon problème est que j'ai deux zones de texte pour les dates de début et de fin. Je veux afficher le sélecteur de date lorsque l'utilisateur tape sur la zone de texte. Avec ce code, il affiche le sélecteur de date mais je veux que le sélecteur soit affiché lorsque l'utilisateur tape sur la zone de texte. Et la date sélectionnée doit être liée à la zone de texte.

    <DatePicker
    style={{width: 200}}
    date={this.state.date}
    mode="date"
    placeholder="Select date"
    format="YYYY-MM-DD"
    minDate="2016-05-01"
    maxDate="2020-12-12"
    confirmBtnText="OK"
    cancelBtnText="Cancel"
    onDateChange={(date) => {this.setState({date: date})}}

Comment puis-je y parvenir ? Toute aide serait appréciée. Merci d'avance !!!

Answer 1

Essayez le code ci-dessous

fonction

_showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });

_hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });

_handleDatePicked = date => {
    var dobValue='Select Date of Birth';
    var date = new Date(date);
    if (! isNaN(date)) {
        this.setState({ dob: date });
    }
    this._hideDateTimePicker();

Rendu

var dobValue='Select Date of Birth';

var date = new Date(this.state.dob);
dobValue= isNaN(date) ? this.state.dob :date.getDate() + "/"+ parseInt(date.getMonth()+1) +"/"+ date.getFullYear();

<DateTimePicker isVisible={this.state.isDateTimePickerVisible} onConfirm={this._handleDatePicked} onCancel={this._hideDateTimePicker}/>

<Input style={{fontSize:16,padding:6,borderColor:'#C8C8C8',borderWidth: 1}} placeholder="Email" onChangeText={this._showDateTimePicker} value={dobValue}/>

Answer 2

Ajoute la référence à l'indicateur de date,

 <DatePicker
    style={{width: 200}}
    ref='datepicker'
    date={this.state.date}
    mode="date"
    placeholder="Select date"
    format="YYYY-MM-DD"
    minDate="2016-05-01"
    maxDate="2020-12-12"
    confirmBtnText="OK"
    cancelBtnText="Cancel"
    onDateChange={(date) => {this.setState({date: date})}}

onTap de l'appel texte this.refs.datepicker.onPressDate() ;