native-cmos-picker
react-native 项目中的选择器,iOS和安卓平台保持相同样式;支持用户自己传入数据,也可选择已有时间/日期数据进行展示。
安装
npm install --save-dev native-cmos-picker
link
react-native link
项目中引入
import CMOSPicker from 'native-cmos-picker';
使用
注意:==使用之前,如果是选择日期或时间(即用户不传入自定义数据),为了确保选择完成之后返回所需格式的时间/日期数据,请先创建一个对象用于定义格式。==其中的'date'、'dateTime'、'time'等是固定的,用户修改后面的'YYYY-MM-DD'等格式即可。
const FORMATS = {
'date': 'YYYY-MM-DD',
'simpleDate': 'YYYY-MM',
'dateTime': 'YYYY-MM-DD HH:mm',
'exactDateTime': 'YYYY-MM-DD HH:mm:ss',
'time': 'HH:mm',
'exactTime': 'HH:mm:ss'
};
引入组件之后,在render方法中引入标签,并传入相应配置:
render() {
return (
<CMOSDatePicker
ref='CMOSDatePicker'
mode='date'
defaultValue={['2016','6','6']}
cancelBtnText='cancel'
confirmBtnText='commit'
cancelBtnColor='#424242'
confrimBtnColor='#009EFF'
format={FORMATS}
onDataConfirm={(dateStr,date) => this.dateChange(dateStr,date)}
>
</CMOSDatePicker>
);
}
CMOSPicker 标签中各配置参数介绍:
注意:以下参数为用户传入mode时的配置项,即选择时间/日期,不传入自定义数据
参数 | 类型 | 是否必填 | 说明 | 默认值 |
---|
ref | string | Y | 组件的ref值,要通过该值获取到选择器组件,调用其show()方法 | / |
mode | string | Y | 显示的日期格式,可选'date','datetime','time'等六种 | / |
defaultValue | array | N | 选择器打开时的默认值,数组中的元素均为string类型 | 当前时间对应的数组 |
minDate | Date或Number | N | 选择器显示的可供选择的最小时间 | 当前时间之前20年 |
maxDate | Date或Number | N | 选择器显示的可供选择的最大时间 | 当前时间之后20年 |
confirmBtnText | string | N | 选择器右上角按钮显示文字 | 确认' |
cancelBtnText | string | N | 选择器左上角按钮显示文字 | '取消' |
titleText | string | N | 选择器中上部显示的文字 | 见下方说明 |
confrimBtnColor | array | N | 选择器右上角按钮文字颜色 | 25,172,255,1 |
cancelBtnColor | array | N | 选择器左上角按钮文字颜色 | 153,153,153,1 |
titleColor | array | N | 选择器中上部文字颜色 | 20,20,20,1 |
toolBarBg | array | N | 选择器上部工具栏背景颜色 | 232,232,232,1 |
pickerBg | array | N | 选择器背景颜色 | 232,232,232,1 |
fontColor | array | N | 选择器内文字颜色 | 31,31,31,1 |
topLineColor | string | N | 选择器顶部分割线颜色 | '#ffffff' |
toolBarFontSize | number | N | 选择器工具栏文字字体大小 | 16 |
fontSize | number | N | 选择器内文字字体大小 | 16 |
format | object | N | 时间/日期样式,传入开头定义的样式对象即可,用户确认选择后将按此样式进行返回,返回类型为字符串 | 上文中FORMATS对象中的格式 |
onDateChange | function | Y | 用户确认选择后的回调方法,==参数有两个:1.选择后对应格式的字符串;2.所选时间对应的时间戳(Date类型)== | / |
注意:以下参数为用户传入自定义数据时的配置项。==若用户传入自定义数据,则就无须再配置mode或format,否则传入的自定义数据是无效的。==
参数 | 类型 | 是否必填 | 说明 | 默认值 |
---|
data | array或json对象 | Y | 选择器数据,支持数据联动 | / |
onDateChange | function | Y | 用户确认选择后的回调方法,==参数为包含选择数据的数组== | / |
补充说明:
- defaultValue数组中,元素个数不得多于mode类型对应的元素个数,如:若mode为date,则该数组中最多有三个元素;若mode为time,则数组中最多有两个元素。如果是自定义数据,则默认值必须在自定义数据中存在。
- ==ref必填的原因是,CMOSPicker组件暴露给用户了一个show()方法,==用于在需要展示选择器的地方调用。用户只有设置ref才能获取到相关组件。具体使用见使用示例。
- titleText针对不同mode有不同的默认值:mode为date时,titleText为'年/月/日';mode为dateTime时,titleText为'年/月/日/时/分',其他的以此类推。
- 注意:minDate/maxDate为Date类型,与默认值传入类型(数组)不同
- 注意:==配置项中所有关于颜色的配置,传入的都是数组类型(rgba)==,如25,172,255,1
- 用户自定义数据时,若只有单个滚轮,则直接传入数组即可,若数据量大且有联动,最好单独写到json文件中再引入。具体参看下文示例。
使用示例
testData.json // 两个滚轮,且联动
[
{
"a": [1, 2, 3, 4]
},
{
"b": [5, 6, 7, 8]
}
]
testDataThree.json // 三个滚轮,且联动
[
{
"a": [
{
"a1": [1, 2, 3, 4]
},
{
"a2": [5, 6, 7, 8]
},
{
"a3": [9, 10, 11, 12]
}
]
},
{
"b": [
{
"b1": [11, 22, 33, 44]
},
{
"b2": [55, 66, 77, 88]
},
{
"b3": [99, 1010, 1111, 1212]
}
]
},
{
"c": [
{
"c1": ["a", "b", "c"]
},
{
"c2": ["a2", "b2", "c2"]
},
{
"c3": ["a3", "b3", "c3"]
}
]
}
]
index.js
/**
* Created by wangchengzhi on 2017/3/15
* native
*/
import React, { Component } from 'react';
import Moment from 'moment';
import CMOSPicker from 'native-cmos-picker';
import testData from './testData.json';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
TextInput,
} from 'react-native';
const FORMATS = {
'date': 'YYYY-MM-DD',
'simpleDate': 'YYYY-MM',
'dateTime': 'YYYY-MM-DD HH:mm',
'exactDateTime': 'YYYY-MM-DD HH:mm:ss',
'time': 'HH:mm',
'exactTime': 'HH:mm:ss'
};
export default class DatePickerTest extends Component {
constructor(props){
super(props);
this.state = {
text: '123',
date: new Date(),
}
}
render() {
return (
<View style={styles.container}>
<Button
style={{marginTop:20,}}
onPress={() => this.onPressShowPicker()}
title="DataPicker"
color="#841584"
/>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1,width:200}}
placeholder= {this.state.text}
/>
<CMOSPicker
ref='CMOSPicker'
titleText='请选择'
format={FORMATS}
mode='dateTime'
onDataConfirm={(dateStr,date) => this.dateChange(dateStr,date)}
minDate={this.state.date.getFullYear()-1}
maxDate={this.state.date.getFullYear()+1}
// defaultValue={['2016']}
>
</CMOSPicker>
<CMOSPicker
ref='CMOSPicker_NO2'
data={testData}
onDataConfirm={(date) => this.customDataChange(date)}
defaultValue={['a',2]}
>
</CMOSPicker>
</View>
);
}
// 选择日期/时间
dateChange(dateStr,date){
this.setState({
text: dateStr,
// text: JSON.stringify(date),
});
console.log(date);
}
// 选择自定义数据
customDataChange(dateArray){
this.setState({
text: JSON.stringify(dateArray[0]) + ' ' + JSON.stringify(dateArray[1]),
});
}
onPressShowPicker(){
this.refs.CMOSPicker.show();
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'column',
backgroundColor: '#F5FCFF',
padding: 50,
},
});
AppRegistry.registerComponent('DatePickerTest', () => DatePickerTest);