Maison > Article > interface Web > 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: '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>
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!