So verwenden Sie die Datetime-Selektorkomponente von React Native

Dieses Mal zeige ich Ihnen, wie Sie die Datums- und Uhrzeitauswahlkomponente von React Native verwenden und welche Vorsichtsmaßnahmen für die Verwendung der Datums- und Uhrzeitauswahlkomponente von React Native gelten. Hier ist ein praktischer Fall Schauen Sie mal rein.

React Native Datums- und Zeitauswahlkomponente: React-Native-Datepicker, unterstützt Android- und IOS-Dual-Plattformen, unterstützt separate Datumsauswahl, separate Zeitauswahl sowie Datums- und Uhrzeitauswahl und unterstützt benutzerdefinierte Datumsformate.

Rendering

InstallationMethode

npm install react-native-datepicker --save

Beispielcode

<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: &#39;absolute&#39;,
       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>

Beschreibung des Hauptparameters

Datum: Stellen Sie den anfänglich angezeigten Datumsmodus ein: Anzeigemodus, Datum, Datum/Uhrzeit, Zeitformat: Stellen Sie ein Datumsformat, der Standardwert ist „JJJJ-MM-TT“. bestätigenBtnText: der Anzeigename der Bestätigungsschaltfläche cancelBtnText: der Anzeigename der Abbrechen-Schaltfläche minDate: das angezeigte Mindestdatum maxDate: das maximal angezeigte Datum Dauer: Zeitintervall onDateChange: ausgelöst wenn sich das Datum ändert Ereignis Platzhalter: Platzhalter

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

Wie man eine Vue-Baidu-Map erstellt, um die Seite aufzurufen und automatisch zu positionieren

Wie um Vue2.0 zu verwenden Rufen Sie die Kamera an, um Bilder aufzunehmen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Datetime-Selektorkomponente von React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!