react-native-modal-date-picker

a simple date picker for react native


Keywords
react-native, react, android, ios
License
MIT
Install
npm install react-native-modal-date-picker@1.0.3

Documentation

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