Ausführliche Erläuterung der Beispiele für Datums- und Zeitauswahlkomponenten von React Native

Dieses Mal werde ich Ihnen das Beispiel der React Native-Datums- und Uhrzeitauswahlkomponente ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung der React Native-Datums- und Uhrzeitauswahlkomponente? Werfen wir einen Blick darauf.

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:

Analyse der Schritte zur Verwendung der PopupWindow-Komponente mit Vue

vue+jquery+lodash ist beim Schieben oben aufgehängt und fixiert Ausführliche Erläuterung der Funktionsimplementierung

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispiele für Datums- und Zeitauswahlkomponenten von React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!