Heim > Artikel > Web-Frontend > 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: '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>
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!