本文原創首發於公眾號：ReactNative開發圈，轉載需註明出處。

首先祝大家勞動節快樂，勞動最光榮！

React Native日期時間選擇元件：react-native-datepicker，支援安卓和IOS雙平臺，支援單獨選擇日期、單獨選擇時間和選擇日期和時間，支援自定義日期格式。

效果圖

安裝方法

npm install react-native-datepicker --save
複製程式碼

示例程式碼

<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="確定"
          cancelBtnText="取消"
          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="確定"
          cancelBtnText="取消"
          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>
複製程式碼

主要引數說明

date：設定初始顯示的日期
mode：顯示的模式，date,datetime,time
format：設定日期格式，預設為`YYYY-MM-DD`
confirmBtnText：確定按鈕的顯示名稱
cancelBtnText：取消按鈕的顯示名稱
minDate：顯示的最小日期
maxDate：顯示的最大日期
duration：時間間隔
onDateChange：日期變化時觸發的事件
placeholder：佔位符

完整示例

完整程式碼：GitHub – forrest23/ReactNativeComponents: React Native元件大全，介紹React Native常用元件的使用方法和使用示例
本次示例程式碼在 Component11資料夾中。請不要吝嗇你們的Star！

元件地址

GitHub – xgfe/react-native-datepicker: react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS

微信不讓跳轉外鏈，可以點選檢視原文來檢視外鏈GitHub內容。

歡迎關注我的微信公眾號：ReactNative開發圈