React Native日期时间选择组件
本文原创首发于公众号:ReactNative开发圈,转载需注明出处。 React Native日期时间选择组件:react-native-datepicker,支持安卓和IOS双平台,支持单独选择日期、单独选择时间和选择日期和时间,支持自定义日期格式。 效果图
安装方法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:设置初始显示的日期 完整示例完整代码:GitHub - forrest23/ReactNativeComponents: React Native组件大全,介绍React Native常用组件的使用方法和使用示例 组件地址GitHub - xgfe/react-native-datepicker: react native datePicker component for both Android and IOS,useing DatePikcerAndroid,TimePickerAndroid and DatePickerIOS 微信不让跳转外链,可以点击查看原文来查看外链GitHub内容。 欢迎关注我的微信公众号:ReactNative开发圈 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |