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>
)
}

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

1 个答案: