React Native日期時間選擇組件

本文原創首發於公衆號：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開發圈