如何在React Native中的材料日期选择器中实现材料文本输入

Question

你好，我正在使用React Native中的材料日期选择器。

<DatePicker
   // style={{width: 200}}
    date={this.state.date}
    mode="date"
    placeholder="Date Of Birth"
    format="YYYY-MM-DD"
    minDate="2016-05-01"
    maxDate="2016-06-01"
    confirmBtnText="Confirm"
     iconSource = {uri=require('/root/VS_Code/JavascriptProjects/MatrimonialAppSvn/MatrimonialApp/assets/Images/dateofbirth.png')}
    cancelBtnText="Cancel"
    customStyles={{
      dateInput:{borderWidth: 0,marginLeft:40},
      dateIcon: {
        position: 'absolute',
        left: 0,
        top: 4,
        marginRight:200,
        marginLeft: 0
      },
      // dateInput: {
      //   marginLeft: 36
      // }
      // ... You can check the source to find the other keys.
    }}
    onDateChange={(date) => {this.setState({date: date})}}
  />

对于日期输入，我需要实现材料日期选择器，在此提示升级为焦点。我知道可以通过放置图标并独立查看，可以单独进行，但是随后我需要在单击时打开datepicker。如果以上不可能，那么可以通过单击我的图标打开日期选择器并实现它，如果是如何？

？

谢谢:)

Answer 1

是的，您可以单击任何图标打开datepicker。您可以通过重叠视图来实现它。将您的datepicker放在图标上（您要打开datepicker）。请参阅以下代码。它可能会帮助您。

render(){
  return(
  <View style={{ width: 25, height: 25 }}>
                            <View style={{ width: '100%',height:'100%' }}>
                                <Image style={{ width: 20, height: 20 }}
                                 source={icons.IC_CALENDAR} //add your icon here
                                 /> 
                            </View>
                            <DatePicker
                                style={{ 
                               position:'absolute',top:0,right:0,left:0,bottom:0 
                                }}
                                 date={this.state.date}
                                 mode="date"
                                placeholder="Date Of Birth"
                                format="YYYY-MM-DD"
                                minDate="2016-05-01"
                                maxDate="2016-06-01"
                               confirmBtnText="Confirm"
                                cancelBtnText="Cancel"
                                customStyles={{
                                    dateIcon: {
                                        position: 'absolute',
                                        left: 0,
                                        top: 4,
                                        width: 0,
                                        height: 0,
                                        marginLeft: 0
                                    }, //give width and height 0 to date 
 icon to invisible the date icon
                                }}
                                onDateChange={(date) => {
                                  this.setState({date: date})
                                }}
                            />
                        </View>
)
}