React native 如何在React Native中单击按钮打开日期选择器

我想知道如何在react native中单击按钮时显示datepicker。我已经尝试了各种解决方案，但仍然没有成功，任何帮助都是有帮助的。 多谢各位

下面是我试过的

import React, { Component } from 'react';
import {
Platform,
StyleSheet,
View,DatePicker
} from 'react-native';

这是我的渲染方法

render（）{
返回(
this.datePicker.onPressDate（）}>
你好，日期
{this.datePicker=picker；}}
日期={this.state.date}
mode=“日期”
占位符=“选择日期”
格式=“YYYY-MM-DD”
minDate=“2016-05-01”
maxDate=“2020-12-12”
confirbmtntext=“确定”
cancelBtnText=“取消”
onDateChange={（日期）=>{this.setState（{date:date}}}
/>     
);
}

每当我跑的时候，我都会发现错误

---

我建议使用react native datepicker库作为日期选择器。它将为您提供更多定制选项，并与Android和iOS这两种平台兼容

下面是我在一个应用程序中使用的示例代码：-

<View style={{ backgroundColor: 'transparent', margin: 5 }}>
            <DatePicker date={this.state.date} showIcon={false} placeholder="Birthday" mode="date" format="DD-MM-YYYY"
              customStyles={{
                dateInput: {
                  borderWidth: 0,
                  height: 50,
                  width: 170,
                  right: 30,
                },
                dateText: {
                  marginTop: 5,
                  color: 'white',
                  fontSize: 18,
                },
                placeholderText: {
                  marginTop: 5,
                  right: 10,
                  color: 'white',
                  fontSize: 18,
                }
              }
              }
              onDateChange={(date) => { this.setState({ date: date }) }} placeholderTextColor="white" underlineColorAndroid={'rgba(0,0,0,0)'} style={{ height: 50, width: 170, paddingLeft: 15, borderRadius: 4, backgroundColor: 'rgba(0,0,0,0.4)' }}></DatePicker>
          </View>

{this.setState（{date:date}}}占位符textcolor=“white”undernecrecolorandroid={'rgba（0,0,0,0）}样式={{高度：50，宽度：170，左填充：15，边界半径：4，背景颜色：'rgba（0,0,0.4）}>

---

你可以找到库

看看这个包react native modal datetime picker它是为跨平台工作的，具有完美的设计和高度可定制性

---

您只需标记是否渲染选择器组件，然后按将其打开即可。像这样的

render() {
  return (
    <View>
      <TouchableOpacity
        onPress={() => this.setState({ picker: !this.state.picker })}>
        <Text>Hello Date</Text>
      </TouchableOpacity>
      {this.renderPicker()}
    </View>
  );
}

renderPicker() {
  if (this.state.picker) {
    return (
      <DatePicker
        style={{ width: 200 }}
        ref={picker => {
          this.datePicker = picker;
        }}
        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 });
        }}
      />
    );
  }
}

render（）{
返回(
this.setState（{picker:！this.state.picker}）}>
你好，日期
{this.renderPicker（）}
);
}
renderPicker（）{
if（this.state.picker）{
返回(
{
this.datePicker=picker；
}}
日期={this.state.date}
mode=“日期”
占位符=“选择日期”
格式=“YYYY-MM-DD”
minDate=“2016-05-01”
maxDate=“2020-12-12”
confirbmtntext=“确定”
cancelBtnText=“取消”
onDateChange={date=>{
this.setState（{date:date}）；
}}
/>
);
}
}

我正在使用

react native datepicker

和以下逻辑：

<DatePicker
showIcon={false}
hideText={true}
ref={(ref)=>this.datePickerRef=ref}
...
/>

<DatePicker
showIcon={false}
hideText={true}
ref={(ref)=>this.datePickerRef=ref}
...
/>

onPress={() => this.datePickerRef.onPressDate()}