项目里面用到了 react-native-datepicker日期选择组件,主要介绍下交互事件和样式修改。
看下样式效果:
代码:
<DatePicker
style={{width: 100}}
date={this.state.startdatetime}
mode="date"
placeholder='起始时间'
format="YYYY-MM-DD"
minDate="1990-01-01"
maxDate="2020-01-01"
confirmBtnText="确定"
cancelBtnText="取消"
customStyles={{
dateIcon:{
position: 'absolute',
left: 0,
top: 4,
marginLeft: 0,
width:0
},
dateInput:{
borderWidth:0,
borderWidth:1,borderColor:"#f2f2f2",borderRadius:20,height:30,backgroundColor:"#f2f2f2"
}
}}
onDateChange={(date) =>{this.setState({startdatetime:date});Animated.spring(this.state.yuecolor,{toValue:1,friction:3,tension:20}).start();Animated.spring(this.state.ricolor,{toValue:1,friction:3,tension:20}).start();}}
>
详细见蓝色地方,样式dateInput和交互onDateChange都标注出来了。
mode="date"配合format="YYYY-MM-DD"选中后就会变成中文的月日年