如何使用 NativeBase 日期选择器答案

【问题标题】：How to use NativeBase DatePicker如何使用 NativeBase 日期选择器
【发布时间】：2018-06-10 21:35:54
【问题描述】：

鉴于 NativeBase v2.5.1 中的 DatePicker Api，我应该如何使用新的选定日期捕获更改日期事件？

如果我理解得很好，所选日期仅在组件的内部状态中可用：

setDate(date) {
    this.setState({ chosenDate: new Date(date) });
}

我想我可以使用 react native ref api，但它似乎不对，因为其他类似的组件确实提供了 onDateChange 事件，例如：react-native-datepicker

【问题讨论】：

见公关github.com/GeekyAnts/NativeBase/pull/1987
是的，这似乎更好！为什么不为 Android 也这样做？
用v2.5.2修复
<DatePicker style={{ width: 200 }} date={this.state.date} mode="date" placeholder="select date" format="YYYY-MM-DD" minDate="2016-05-01" maxDate="2017-11-01" confirmBtnText="Confirm" cancelBtnText="Cancel" onDateChange={date => this.dateChangedHandler(date)} />
以上应该可以解决您的要求。只需添加函数 dateChangedHandler()

标签： react-native datepicker native-base

【解决方案1】：

查看文档以获取日期选择器https://docs.nativebase.io/Components.html#date-picker-def-headref

来自 NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink/blob/master/src/screens/datepicker/index.js的示例

用v2.5.2修复

【讨论】：

@Supriya Kalghatgi，当我使用 Native base 中的日期选择器时，当日期选择器出现在 ios 上时，显示的是白色背景，而不是调用日期选择器的 UI。本机基础版本：“2.7.2”，有什么解决方案还是一个错误？ ,请检查

【解决方案2】：

在本机基础 v2.6.1 及更高版本中已修复。

<DatePicker
formatChosenDate={date => {return moment(date).format('YYYY-MM-DD');}}
..... />

【讨论】：

我正在尝试通过例如操作代码中的默认日期将 6 个月添加到今天的日期，该值会在状态中更新，但不会在组件内更新 (stackoverflow.com/questions/62147922/…)。有什么想法吗？

【解决方案3】：

你可以设置，

onDateChange={(date) => this.setDate(date)}

并确保您已将原生版本更新到 v2.6.1

查看：v2.6.1

【讨论】：

【解决方案4】：

import {DatePicker} from 'native-base'

        this.state = {
            date : ''
        }
    render(){
        console.log('selected date',this.state.date)
        render(
            <View>
                <DatePicker
                    defaultDate={new Date(1994, 3, 23)}
                    // minimumDate={new Date()}
                    textStyle={'#000'}
                    placeHolderTextStyle={'#000'}
                    onDateChange={(date) => this.setState({ date })}
                 />
            </View>
        )
    }

【讨论】：