- react-native时间控件
使用react-native-datepicker
npm install react-native-datepicker –save
<DatePicker
mode='datetime' //使用类型 date datetime time
date={this.state.pickDate} 赋值
format='YYYY-MM-DD HH:mm:ss' //格式化
showIcon={false} //是否显示图标
iconSource={require('./google_calendar.png')} //图标路径
onDateChange={(date)=>this.showDate(date)}/> //change哈数
<DatePicker
date={this.state.pick1Date}
format='YYYY-MM-DD'
showIcon={false}
confirmBtnText="确认"
cancelBtnText="取消"
onDateChange={(date)=>this.showDate1(date)}/>
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PanResponder
} from 'react-native';
import DatePicker from 'react-native-datepicker';
export default class datepicker extends Component {
constructor(props) {
super(props);
this.state = {
date: '',
time: '20:00',
datetime: '2016-05-05 20:00',
datetime1: '2016-05-05 20:00'
};
}
componentWillMount() {
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (e) => {console.log('onStartShouldSetPanResponder'); return true;},
onMoveShouldSetPanResponder: (e) => {console.log('onMoveShouldSetPanResponder'); return true;},
onPanResponderGrant: (e) => console.log('onPanResponderGrant'),
onPanResponderMove: (e) => console.log('onPanResponderMove'),
onPanResponderRelease: (e) => console.log('onPanResponderRelease'),
onPanResponderTerminate: (e) => console.log('onPanResponderTerminate')
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to react-native-datepicker example!
</Text>
<DatePicker
style={{width: 200}}
date={this.state.date}
mode="date"
placeholder="placeholder"
format="YYYY-MM-DD"
minDate="2016-05-01"
maxDate="2016-06-01"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
iconSource={require('./google_calendar.png')}
onDateChange={(date) => {this.setState({date: date});}}
/>
<Text style={styles.instructions}>date: {this.state.date}</Text>
<DatePicker
style={{width: 200}}
date={this.state.time}
mode="time"
format="HH:mm"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
minuteInterval={10}
onDateChange={(time) => {this.setState({time: time});}}
/>
<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="Confirm"
cancelBtnText="Cancel"
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="Confirm"
cancelBtnText="Cancel"
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>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5
}
});