react-native 使用日历 react-native-common-date-picker

一个很棒的跨平台 React Native 日期选择器和日历组件，适用于 iOS 和 Android。最下面附带截图

https://github.com/lchenfox/react-native-common-date-picker

安装: 

yarn add react-native-common-date-picker

import {DatePicker} from "react-native-common-date-picker";

<DatePicker
    confirm={date => {
        console.warn(date)
    }}
/>

 

import {CalendarList} from "react-native-common-date-picker";

<Modal animationType={'slide'} visible={this.state.visible}>
     <CalendarList
          containerStyle={{flex: 1}}
          cancel={() => this.setState({visible: false})}
          confirm={data => {
              this.setState({
                   selectedDate1: data[0],
                   selectedDate2: data[1],
                   visible: false,
              });
          }}
     />
</Modal>

 

具体配置参考GitHub

<DatePicker
   cancelText="取消"
   confirmText='确定'
   defaultDate={new Date()}
   maxDate={'2057-03-25'}
   monthDisplayMode={'digit'}
   yearSuffix={'年'}
   monthSuffix={'月'}
   daySuffix={'日'}
   cancel={()=>{
     点击取消
   }}
   confirm={date => {
    点击确定
   }}
 />