react-native-modal-date-picker
v1.0.3
Published
a simple date picker for react native
Downloads
23
Readme
react-native-modal-date-picker
react native date picker
1.0.0 版本更新
重构了组件的代码,语法更符合规范, 请使用 0.25+ 版本的 react native。
删除了 selectData, onSelect API,改用 defaultData 和 onChange 回调。
删除了 formater API, 因为目前只有日期选择,未来版本可能会加上时间选择。
增加了 dateTextStyle API。
简介
这是一个 react-native 的时间选择器,使用了原生的 modal 和 picker 组件。 支持 ios 和 android。
API
defaultData:默认初始值,请传入 YYYY-MM-DD 格式数据。(1.0.0新增)
onChange: 回调函数,参数为修改后的data值。(1.0.0新增)
dateTextStyle: 日期文字的样式。(1.0.0新增)
~~selectData: 选择的值,通过onSelect回调修改,格式为“YYYY-MM-DD”。(1.0.0删除)~~
~~onSelect: 回调函数,参数为修改后的data值。(1.0.0删除)~~
~~formater: 显示的格式,默认为“YYYY-MM-DD”,可参考moment修改。(1.0.0删除)~~
cancleText: 取消的文本,默认为“取消”。
finishText: 确定的文本,默认为“确定”。
title: 组件标题,默认为“请选择日期”。
modalColor: modal层的颜色,默认为“rgba(0,0,0,0.4)”。
pickerColor: 组件的颜色,默认为“rgba(255,255,255,0.8)”。
buttonColor: 确定和取消按钮的颜色,默认为“#FE751D”。
pickerHeight: 组件的高度,默认为300。
keepShowModal: 点击组件外的modal层是否不关闭组件,默认关闭组件。值为true或false。
安装
npm install react-native-modal-date-picker --save
使用
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Picker from 'react-native-modal-date-picker'
import moment from 'moment'
export default class rndemo extends Component {
onChange (data) {
console.log("new date",data)
}
render() {
return (
<View style={{marginTop:40}}>
<Picker
defaultData={moment(new Date).format('YYYY-MM-DD')}
onChange={this.onChange}
keepShowModal={true}
cancleText="cancle"
finishText="finish"
title="title"
modalColor="#000"
pickerHeight={400}
pickerColor="#fff"
buttonColor="#000"
dateTextStyle={{color:'blue'}}
/>
</View>
)
}
}
AppRegistry.registerComponent('rndemo', () => rndemo)
协议
MIT