react-native-datepicker

日期选择框

1. 安装

   yarn add  react-native-datepicker 
   

2. 引入

   import DatePicker from 'react-native-datepicker';
   

3. 使用

    const dateNow=new Date();
    const currentDate = `${dateNow.getFullYear()}-${dateNow.getMonth() + 1}-${dateNow.getDate()}`;
    <DatePicker
      // 输入框的样式
      style={{ width: Styleskits.screen.width - 50 }} 
      mode="date"
      placeholder="设置生日"
      format="YYYY-MM-DD"
      // 选择日期后的确定取消文本按钮
      confirmBtnText="确定"
      cancelBtnText="取消"
      iconComponent={<Icon name="angle-down"   />}
      // 默认是方框选择的样式，这个是滚轮滚动的样式
      androidMode="spinner"
      minDate="1900-01-01"
      maxDate={currentDate}
      customStyles={{
        dateIcon: {
          // 表示不需要那个小日历图标
          display: "none"
        },
        // 输入框的样式
        dateInput: {
          borderWidth: 0,
          borderBottomWidth: 1.1,
          // 里面的文字从左边开始显示
          alignItems:"flex-start",
          paddingLeft:6,
          textAlign:"left"
        },
        // 输入框里面的文字样式
        placeholderText:{
          fontSize:18,
          color:"#afafaf"
        }
      }}
      onDateChange={(date) => { this.setState({ birthday: date }) }}
    />