Widget Date

Le widget Date fournit une interface complète de sélection de date et d'heure avec plusieurs formats d'affichage et options de configuration. Il prend en charge les dates simples, les plages de dates, la sélection d'heure et diverses règles de validation.

Aperçu du Widget​

Le widget Date est construit sur le composant sélecteur de date d'Element UI et offre des capacités de saisie de date/heure flexibles avec de nombreuses options de personnalisation, notamment la spécification de format, les règles de validation et le comportement dynamique.

Options de Configuration​

Paramètres Globaux​

Nom

• Champ: Name
• Description: Libellé d'affichage pour le widget date
• Type: Saisie de texte
• Requis: Oui

Variable/Modèle

• Champ: Variable/Model
• Description: La propriété du modèle de données qui stockera la valeur de date sélectionnée
• Type: Saisie de texte
• Requis: Oui
• Note: Doit être un identifiant unique dans le contexte du formulaire

Valeur par Défaut

• Champ: Default Value
• Description: Valeur initiale pour le widget date
• Type: Saisie dynamique avec suggestions d'autocomplétion
• Prend en charge:
  • Dates statiques: 2023-12-25
  • Expressions dynamiques: {{currentDate}}, ${today}
  • Dates relatives: {{moment().add(7, 'days')}}

Fonction de Date

• Champ: Date function
• Description: Fonction JavaScript personnalisée pour contrôler le comportement du sélecteur de date
• Type: Saisie de texte
• Utilisation: Définir des restrictions de date ou des calculs personnalisés
• Exemple: return { disabledDate: (time) => time.getTime() < Date.now() }

Type d'Affichage

• Champ: Show Type
• Description: Détermine le format d'affichage du sélecteur de date et le mode de sélection
• Type: Sélection déroulante
• Options:
  • year - Sélection d'année uniquement
  • month - Sélection de mois uniquement
  • date - Sélection de date simple
  • dates - Sélection de dates multiples
  • datetime - Sélection de date et d'heure
  • datetimerange - Sélection de plage de date et d'heure
  • daterange - Sélection de plage de dates
• Par défaut: date

Est Timestamp

• Champ: Is Timestamp
• Description: Lorsqu'activé, renvoie une valeur timestamp au lieu d'une chaîne de date formatée
• Type: Interrupteur à bascule
• Par défaut: false

Effaçable

• Champ: Clearable
• Description: Permet aux utilisateurs d'effacer la date sélectionnée
• Type: Interrupteur à bascule
• Par défaut: true

Format

• Champ: Format
• Description: Format d'affichage de date/heure utilisant les chaînes de format moment.js
• Type: Saisie de texte
• Exemples:
  • YYYY-MM-DD - 2023-12-25
  • DD/MM/YYYY - 25/12/2023
  • YYYY-MM-DD HH:mm:ss - 2023-12-25 14:30:00
  • MMM DD, YYYY - Dec 25, 2023

Validation​

Validation Basée sur l'Écran​

Configurez le comportement du widget sur différents écrans (mobile, tablette, ordinateur):

Disponible

• Contrôle si le widget est disponible sur des types d'écran spécifiques
• Type: Interrupteur à bascule par écran

Visible

• Contrôle la visibilité du widget sur des types d'écran spécifiques
• Type: Interrupteur à bascule ou expression avancée
• Avancé: Utilisez des expressions JavaScript comme {{user.role === 'admin'}}

Requis

• Rend le champ obligatoire sur des types d'écran spécifiques
• Type: Interrupteur à bascule ou expression avancée
• Validation: Déclenche la validation du formulaire si vide

Désactiver

• Désactive l'interaction utilisateur sur des types d'écran spécifiques
• Type: Interrupteur à bascule ou expression avancée

Règles de Validation​

Règles Personnalisées

• Objectif: Définir des critères de validation spécifiques
• Configuration:
  • Type de Règle: Sélectionner parmi les types de règles prédéfinis
  • Valeur: Paramètre de règle (le cas échéant)
  • Message: Message d'erreur personnalisé
• Exemples:
  • Validation de date minimale
  • Validation de date maximale
  • Validation de plage de dates personnalisée

Actions​

Au Clic

• Champ: On click
• Description: Code JavaScript exécuté lorsque la sélection de date change
• Type: Éditeur de code ou constructeur d'actions
• Variables de Contexte:
  • SF_input.value - Valeur de date sélectionnée
  • SF_input.SF_currentIndex - Index de boucle actuel (si dans une boucle)
• Exemple: console.log('Date selected:', SF_input.value)

Configuration de Style​

Placeholder

• Champ: Placeholder
• Description: Texte d'espace réservé affiché lorsqu'aucune date n'est sélectionnée
• Type: Saisie de texte
• Exemple: "Sélectionner une date"

Largeur

• Champ: Width
• Description: Spécification de la largeur du widget
• Type: Saisie de texte
• Exemples: 100%, 300px, 50rem

Noms de Classes

• Champ: Class
• Description: Classes CSS personnalisées pour le style
• Type: Saisie de texte avec prise en charge de classes dynamiques
• Exemples: custom-date-picker, highlighted-field

Classes Dynamiques

• Objectif: Appliquer des classes CSS conditionnelles basées sur les données
• Configuration: Utilisez le bouton pinceau pour une configuration de classe avancée
• Exemple: Appliquer différents styles selon la validité de la date sélectionnée

Exemples d'Utilisation​

Sélection de Date Basique​

Sélection de Plage de Dates​

Valeurs par Défaut Dynamiques​

Fonctionnalités Avancées​

Visibilité Conditionnelle​

Configurez le widget pour afficher/masquer en fonction d'autres valeurs du formulaire:

Bonnes Pratiques​

1. Cohérence du Format: Utilisez des formats de date cohérents dans toute votre application
2. Validation: Validez toujours les saisies de date, en particulier pour les dates critiques pour l'entreprise
3. Expérience Utilisateur: Fournissez des espaces réservés et des libellés clairs
4. Accessibilité: Assurez un étiquetage approprié pour les lecteurs d'écran
5. Optimisation Mobile: Tenez compte des différents comportements de sélecteur de date pour les appareils mobiles
6. Valeurs par Défaut: Utilisez des valeurs par défaut judicieuses pour améliorer l'expérience utilisateur
7. Validation de Plage: Pour les plages de dates, assurez-vous que la date de début est antérieure à la date de fin

Dépannage​

Problèmes Courants​

La date ne s'enregistre pas correctement

• Vérifiez que la configuration du format correspond aux attentes de votre backend
• Vérifiez que le nom du modèle est unique et correctement défini

La validation ne fonctionne pas

• Assurez-vous que les règles requises sont correctement configurées
• Vérifiez que les messages de validation sont définis

Le sélecteur de date n'apparaît pas

• Vérifiez que le widget est défini comme visible sur le type d'écran actuel
• Recherchez les conflits CSS qui pourraient masquer le sélecteur

Problèmes d'affichage du format

• Confirmez que la chaîne de format suit les conventions moment.js
• Testez les chaînes de format avec des dates d'exemple

Conseils de Débogage​

1. Utilisez les outils de développement du navigateur pour inspecter le HTML généré
2. Vérifiez la console pour les erreurs JavaScript
3. Vérifiez les valeurs du modèle de données dans Vue DevTools
4. Testez différentes tailles et orientations d'écran