CATALOGUE Code & Data Apprendre Ionic 5 Comment Utiliser IonDateTime pour Gérer les Dates de Publication

Comment Utiliser IonDateTime pour Gérer les Dates de Publication

Les formulaires : ion-datetime

Vidéo non disponible ! Réessayez plus tard

4h 11min

59 leçons

Transcription

99,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

4h 11min

59 leçons

99,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Ajout des Propriétés et Configuration dans TypeScript

Objectifs

Les objectifs de cette vidéo sont de vous apprendre à intégrer et configurer un input de type date avec IonDateTime, à personnaliser le format d'affichage des dates, et à garantir une expérience utilisateur optimale sur différents dispositifs.

Résumé

Apprenez à utiliser IonDateTime pour créer des inputs de type date dans un formulaire TypeScript, permettant aux utilisateurs de sélectionner des dates de publication.

Description

Dans cette leçon, nous allons explorer l'intégration de IonDateTime dans un formulaire en TypeScript. Cela permettra aux utilisateurs de choisir la date de publication pour une annonce dans une application. Nous commencerons par l'ajout de la propriété de date de publication dans notre formulaire côté TypeScript. Ensuite, nous inclurons un composant IonItem contenant un IonLabel et un IonDateTime, et nous associerons ce dernier au formulaire via la propriété FormControlName. Nous discuterons également de la personnalisation du format d'affichage de la date en utilisant la propriété DisplayFormat. Enfin, nous vérifierons le bon fonctionnement de l'input date dans le navigateur et aborderons les aspects de l'adaptabilité linguistique du composant IonDateTime sur différents dispositifs mobiles.

Questions - réponses

Qu'est-ce que IonDateTime permet de faire dans cette leçon?

IonDateTime permet de créer des inputs de type date dans un formulaire TypeScript, afin de permettre aux utilisateurs de sélectionner des dates de publication.

Comment se fait la personnalisation du format d'affichage de la date?

La personnalisation du format d'affichage de la date se fait via la propriété DisplayFormat dans le composant IonDateTime.

Pourquoi est-il avantageux d'utiliser IonDateTime sur des dispositifs mobiles?

IonDateTime s'adapte automatiquement à la langue du téléphone, offrant ainsi une meilleure expérience utilisateur en affichant l'interface dans la langue appropriée.

Programme détaillé

Accueil de la formation

Module 1 - Débuter avec ionic

Ionic c’est quoi ? 01:34

Télécharger et configurer un éditeur 02:32

Installer Ionic 03:25

Créer une première application 05:58

Module 2 - Éléments de base d’un projet Ionic

Arborescence d’un projet Ionic 03:00

Pages, composants et services 01:15

Création du modèle de données 03:24

Notre première page : Affichage de la liste des annonces 03:57

Notre premier composant 03:42

Envoyer un paramètre à un composant 03:36

Notre premier service 03:24

Faire appel à notre service depuis une page 03:57

Module 3 - Découverte des composants Ionic

Lister des éléments : ion-list et ion-item 01:50

Ajouter du contenu textuel à un ion-item: ion-label 03:45

Ajouter une image dans un ion-item: ion-thumbnail et ion-img 03:08

Changer le style d'un element: le css dans Ionic 03:35

Les ionicons 03:45

Ajouter un bouton à l'entête de la page: ion-toolbar et ion-button 04:21

Superposer un composant à une page: ion-modal 07:09

Créer une liste d'éléments à cocher: ion-checkbox 03:38

Récupérer la liste des catégories depuis le service 06:39

Passer des paramètres à un ion-modal 05:30

Fermer un ion-modal et retourner des paramètres 06:13

Créer un Pipe pour filtrer les annonces par catégorie 09:45

Module 4 - Changer le thème de l’application

Les thèmes sur Ionic 03:28

Changer le thème de l’application 04:36

Module 5 - Encore plus de composants

Nouvelle page : Détails d’une annonce 04:02

Récupérer une annonce par identifiant depuis le servcice 04:59

Afficher des informations détaillées : ion-card 03:50

Utiliser les ion-list à l'intérieur d'une balise ion-card 07:07

Menu de l’application : ion-menu 06:48

Nouvelle page : Création d’une annonce 03:10

Les formulaires sur ionic: Mise en place 04:18

Les formulaires : ion-input 04:22

Personnaliser notre ion-input: désactiver la validation automatique du champ 01:54

Personnaliser notre ion-input: validation manuelle du champ 03:17

Personnaliser notre ion-input: afficher un message d'erreur 04:33

Les formulaires : ion-text-area 03:58

Les formulaires : ion-datetime 02:56

Les formulaires : ion-select 06:00

Les formulaires : Validation du formulaire et ion-toast 06:26

Soumettre le formulaire: Créer le nouvel objet Annonce 04:44

Spumettre le formulaire: Enregistrer la nouvelle annonce 04:11

Nouvelle page : Connexion 03:46

Nouveau service : Utilisateur 05:10

Soumettre le formulaire de connexion : redirection 04:36

Vérifier les informations d’identification : ion-alert 03:01

Mise à jour du formulaire de création de l’annonce 04:30

Module 6 - Lancer l’application sur un smartphone Android

Préparer son environnement 03:21

Configurer le smartphone 02:07

Lancer l’application sur smartphone 03:54

Module 7 - Utiliser les fonctionnalités natives du téléphone

Ionic native 02:15

Composer un numéro de téléphone 05:46

Utiliser l’appareil photo du téléphone 10:33

Garder l’utilisateur connecté 05:50

Déconnecter l’utilisateur 05:31

Module 8 - Générer un APK exécutable pour Android

Personnaliser l’application 03:27

Générer l’APK 02:03

Conclusion 01:38