React Native日期时间选择组件

前端之家收集整理的这篇文章主要介绍了React Native日期时间选择组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

效果

安装方法

  1. npm install react-native-datepicker --save

示例代码

  1. <Text style={styles.instructions}>time: {this.state.time}</Text>
  2. <DatePicker
  3. style={{width: 200}}
  4. date={this.state.datetime}
  5. mode="datetime"
  6. format="YYYY-MM-DD HH:mm"
  7. confirmBtnText="确定"
  8. cancelBtnText="取消"
  9. showIcon={false}
  10. onDateChange={(datetime) => {this.setState({datetime: datetime});}}
  11. />
  12. <Text style={styles.instructions}>datetime: {this.state.datetime}</Text>
  13. <DatePicker
  14. style={{width: 200}}
  15. date={this.state.datetime1}
  16. mode="datetime"
  17. format="YYYY-MM-DD HH:mm"
  18. confirmBtnText="确定"
  19. cancelBtnText="取消"
  20. customStyles={{
  21. dateIcon: {
  22. position: 'absolute',left: 0,top: 4,marginLeft: 0
  23. },dateInput: {
  24. marginLeft: 36
  25. }
  26. }}
  27. minuteInterval={10}
  28. onDateChange={(datetime) => {this.setState({datetime1: datetime});}}
  29. />
  30. <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常用组件的使用方法和使用示例
本次示例代码在 Component11文件夹中。请不要吝啬你们的Star

组件地址

GitHub - xgfe/react-native-datepicker: react native datePicker component for both Android and IOS,useing DatePikcerAndroid,TimePickerAndroid and DatePickerIOS

微信不让跳转外链,可以点击查看原文来查看外链GitHub内容

欢迎关注我的微信公众号:ReactNative开发圈

猜你在找的React相关文章