Comment utiliser le composant de sélection datetime React Native

Cette fois, je vais vous montrer comment utiliser le composant de sélection de date et d'heure React Native, et quelles sont les précautions d'utilisation du composant de sélection de date et d'heure React Native. Voici un cas pratique, allons-y. jetez un 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 :

Comment faire vue-baidu-map pour entrer dans la page et la positionner automatiquement

Comment pour utiliser Vue2.0 Appelez l'appareil photo pour prendre des photos

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!