React Native日期时间选择组件

港控/mmm° 2022-03-14 12:58 201阅读 0赞

*本文原创首发于公众号：ReactNative开发圈，转载需注明出处。*

> React Native日期时间选择组件：react-native-datepicker，支持安卓和IOS双平台，支持单独选择日期、单独选择时间和选择日期和时间，支持自定义日期格式。

## 效果图 ##

![Image 1][]

image

## 安装方法 ##

npm install react-native-datepicker --save

## 示例代码 ##

<Text style={styles.instructions}>time: {this.state.time}</Text>
            <DatePicker
              style={
       {width: 200}}
              date={this.state.datetime}
              mode="datetime"
              format="YYYY-MM-DD HH:mm"
              confirmBtnText="确定"
              cancelBtnText="取消"
              showIcon={false}
              onDateChange={(datetime) => {this.setState({datetime: datetime});}}
            />
            <Text style={styles.instructions}>datetime: {this.state.datetime}</Text>
            <DatePicker
              style={
       {width: 200}}
              date={this.state.datetime1}
              mode="datetime"
              format="YYYY-MM-DD HH:mm"
              confirmBtnText="确定"
              cancelBtnText="取消"
              customStyles={
       {
                dateIcon: {
                  position: 'absolute',
                  left: 0,
                  top: 4,
                  marginLeft: 0
                },
                dateInput: {
                  marginLeft: 36
                }
              }}
              minuteInterval={10}
              onDateChange={(datetime) => {this.setState({datetime1: datetime});}}
            />
            <Text style={styles.instructions}>datetime: {this.state.datetime1}</Text>

## 主要参数说明 ##

date：设置初始显示的日期  
mode：显示的模式，date,datetime,time  
format：设置日期格式，默认为'YYYY-MM-DD'  
confirmBtnText：确定按钮的显示名称  
cancelBtnText：取消按钮的显示名称  
minDate：显示的最小日期  
maxDate：显示的最大日期  
duration：时间间隔  
onDateChange：日期变化时触发的事件  
placeholder：占位符

## 完整示例 ##

完整代码：[GitHub - forrest23/ReactNativeComponents: React Native组件大全，介绍React Native常用组件的使用方法和使用示例][GitHub - forrest23_ReactNativeComponents_ React Native_React Native]  
本次示例代码在 Component11文件夹中。**请不要吝啬你们的Star**！

## 组件地址 ##

[GitHub - xgfe/react-native-datepicker: react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS][GitHub - xgfe_react-native-datepicker_ react native datePicker component for both Android and IOS_ useing DatePikcerAndroid_ TimePickerAndroid and DatePickerIOS]

作者：forrest23  
链接：https://www.jianshu.com/p/71b196cf55e8  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[Image 1]: 
[GitHub - forrest23_ReactNativeComponents_ React Native_React Native]: https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fforrest23%2FReactNativeComponents
[GitHub - xgfe_react-native-datepicker_ react native datePicker component for both Android and IOS_ useing DatePikcerAndroid_ TimePickerAndroid and DatePickerIOS]: https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fxgfe%2Freact-native-datepicker