Widget Heure

Le widget Heure permet aux utilisateurs de sélectionner et de saisir des valeurs temporelles avec une interface de sélection d'heure conviviale. Il prend en charge la sélection d'heure unique et la sélection de plage horaire avec de nombreuses options de personnalisation.

Aperçu​

Le widget Heure offre une méthode intuitive permettant aux utilisateurs de sélectionner des valeurs temporelles dans vos formulaires. Il propose une interface épurée avec des contrôles fléchés optionnels, un formatage personnalisable et la prise en charge des plages horaires. Le widget inclut une validation intégrée et peut être facilement intégré dans des formulaires avec d'autres composants.

Options de Configuration​

Paramètres Globaux​

Configuration de Base​

• Name: Nom d'affichage du champ du widget
• Variable/Model: La propriété du modèle de données où l'heure sélectionnée sera stockée
• Default Value: Valeur de l'heure présélectionnée lors du chargement du widget

Paramètres du Type d'Heure​

• Is Range: Activer pour permettre la sélection de plages horaires (heure de début et heure de fin)
  • Lorsque activé, les utilisateurs peuvent sélectionner une heure de début et une heure de fin
  • Lorsque désactivé, seule une heure unique peut être sélectionnée

Format et Affichage​

• Format: Format d'affichage de l'heure (par exemple, "HH:mm", "HH:mm:ss")
  • HH:mm - Format 24 heures avec heures et minutes
  • HH:mm:ss - Format 24 heures avec heures, minutes et secondes
  • hh:mm A - Format 12 heures avec AM/PM
• Arrow Control: Activer les contrôles fléchés pour faciliter la sélection de l'heure
• Clearable: Permettre aux utilisateurs d'effacer l'heure sélectionnée

Configuration du Placeholder​

• Placeholder: Texte affiché lorsqu'aucune heure n'est sélectionnée (pour la sélection d'heure unique)
• Start Placeholder: Texte affiché pour le champ de l'heure de début (lorsque Is Range est activé)
• End Placeholder: Texte affiché pour le champ de l'heure de fin (lorsque Is Range est activé)

Validation​

Validation Basée sur l'Écran​

Configurez différentes règles de validation pour différents écrans de l'application :

• Available: Contrôler si le widget apparaît sur des écrans spécifiques
• Visible: Contrôler la visibilité du widget en fonction de conditions
• Required: Rendre la sélection de l'heure obligatoire
• Disabled: Désactiver le widget pour empêcher l'interaction de l'utilisateur

Règles de Validation​

Ajoutez des règles de validation personnalisées :

• Custom Rules: Définir une logique de validation spécifique avec des messages d'erreur personnalisés
• Built-in Validation: Validation automatique pour les champs obligatoires

Configuration de Style​

Options de Disposition​

• Width: Définir la largeur du widget (par exemple, "100%", "300px")
• Class Names: Ajouter des classes CSS personnalisées pour le style
• Dynamic Classes: Appliquer des classes CSS conditionnelles en fonction de l'état du formulaire

Design Responsive​

• Le widget s'adapte automatiquement aux différentes tailles d'écran
• Prend en charge les paramètres de largeur responsive

Actions​

• Déclenchées lorsque l'utilisateur sélectionne ou modifie une valeur d'heure
• Accéder à la valeur de l'heure sélectionnée dans vos gestionnaires d'actions
• Utiliser pour la validation de formulaire en temps réel ou les mises à jour de champs dépendants
• Configurer des actions personnalisées lorsque les utilisateurs interagissent avec le widget
• Intégrer avec les workflows de formulaire et la logique métier

Formats d'Heure​

Options de Format Courantes​

• HH:mm - Format 24 heures (par exemple, 14:30)
• HH:mm:ss - Format 24 heures avec secondes (par exemple, 14:30:45)
• hh:mm A - Format 12 heures avec AM/PM (par exemple, 2:30 PM)
• hh:mm:ss A - Format 12 heures avec secondes et AM/PM

Formats Personnalisés​

Vous pouvez définir des formats d'heure personnalisés en fonction des exigences de votre application. Le widget prend en charge les modèles de formatage d'heure standard.

Gestion des Données​

Valeur d'Heure Unique​

Lorsque isRange est false, le widget renvoie une chaîne d'heure unique dans le format spécifié.

Valeur de Plage Horaire​

Lorsque isRange est true, le widget renvoie un tableau avec deux éléments :

• [0] - Heure de début
• [1] - Heure de fin

Valeurs par Défaut​

• Single Time: Fournir une chaîne d'heure dans le format spécifié
• Time Range: Fournir un tableau avec les heures de début et de fin

Bonnes Pratiques​

Sélection du Format d'Heure​

• Utiliser le format 24 heures (HH:mm) pour les applications internationales
• Utiliser le format 12 heures (hh:mm A) pour les applications spécifiques à une région
• Inclure les secondes uniquement lorsque la précision est requise

Expérience Utilisateur​

• Fournir un texte de placeholder clair indiquant le format attendu
• Utiliser les contrôles fléchés pour faciliter la sélection de l'heure
• Activer l'option clearable pour les champs d'heure optionnels

Validation​

• Définir des règles de validation appropriées pour les exigences métier
• Fournir des messages d'erreur clairs en cas d'échec de validation
• Considérer les implications de fuseau horaire pour votre application

Performance​

• Utiliser stratégiquement les valeurs par défaut pour améliorer l'expérience utilisateur
• Considérer l'impact de la validation en temps réel sur les performances
• Optimiser les gestionnaires d'événements de changement pour les formulaires complexes

Dépannage​

Problèmes Courants​

• Incompatibilité de Format: S'assurer que les valeurs par défaut correspondent au format spécifié
• Validation de Plage: Lors de l'utilisation de plages, valider que l'heure de fin est postérieure à l'heure de début
• Fuseau Horaire: Considérer la gestion du fuseau horaire dans votre logique d'application

Débogage​

• Vérifier la console du navigateur pour les erreurs de validation
• Vérifier que la propriété du modèle est correctement liée
• S'assurer que le texte de placeholder est correctement configuré pour les sélections de plages