Explication détaillée des exemples de composants de sélection de date et d'heure React Native

Cette fois, je vais vous apporter une explication détaillée de l'exemple du composant de sélection de date et d'heure React Native. Quelles sont les précautions lors de l'utilisation du composant de sélection de date et d'heure React Native. Voici un cas pratique, jetons un coup d'oeil.

Composant de sélection de date et d'heure React Native : react-native-datepicker, prend en charge les doubles plates-formes Android et IOS, prend en charge la sélection de date séparée, la sélection d'heure séparée et la sélection de date et d'heure, et prend en charge les formats de date personnalisés.

Rendu

InstallationMéthode

npm install react-native-datepicker --save

Exemple de code

<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>

Description du paramètre principal

date : définir le mode de date affiché initial : mode d'affichage, date, dateheure, heure format : Définissez le format de la date, la valeur par défaut est 'AAAA-MM-JJ' confirmBtnText : Le nom d'affichage du bouton OK CancelBtnText : Le nom d'affichage du bouton Annuler minDate : La date minimale affichée maxDate : La date maximale affichée durée : Heure interval onDateChange : Date Événement déclenché lors du changement : Placeholder

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture recommandée :

L'analyse des étapes pour utiliser le composant PopupWindow avec Vue

vue+jquery+lodash est suspendu et fixé en haut lors du coulissement Explication détaillée de la mise en œuvre de la fonction

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!