Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie die Datetime-Selektorkomponente von React Native

So verwenden Sie die Datetime-Selektorkomponente von React Native

php中世界最好的语言
php中世界最好的语言Original
2018-06-01 17:30:471486Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn