Parce que saisir une heure ne devrait pas être une contrainte pour l’utilisateur…
Le contrôle standard de saisie d’heure dans K2 SmartForms est fiable, précis et performant.
Cependant, son interaction repose principalement sur un champ numérique, parfois moins intuitif pour des utilisateurs non techniques ou habitués aux interfaces mobiles.
Le K2 Clock Time Picker Control propose une alternative UX : une sélection de l’heure via un cadran d’horloge interactif, inspiré des time pickers mobiles.
Dans cet article, je vous présente ce custom control orienté expérience utilisateur : interaction visuelle, sélection intuitive des heures et minutes, et configuration flexible selon vos besoins métier.
Le tout prêt à l’emploi pour vos SmartForms.
Une nouvelle façon de créer des custom controls
Avec K2 5.9, il est désormais possible de créer des custom controls en pur JavaScript et CSS, sans dépendre de frameworks lourds.
Concrètement : le contrôle est développé, importé dans K2 Management, puis directement utilisable dans K2 Designer.
Le Clock Time Picker a servi de projet de référence pour exploiter cette nouvelle approche.
Résultat : un contrôle léger, maintenable, et parfaitement intégré à l’écosystème K2.
Note : Cette fonctionnalité est disponible à partir de K2 5.9. Pour les versions antérieures, des alternatives peuvent être étudiées.
Ce que fait ce K2 Clock Time Picker Control
Sélection par cadran analogique
Le contrôle propose un cadran d’horloge interactif permettant à l’utilisateur de sélectionner visuellement l’heure puis les minutes.
Cette approche est particulièrement adaptée :
- aux utilisateurs peu à l’aise avec les champs numériques
- aux environnements orientés mobile ou tablette
- aux formulaires où l’ergonomie prime sur la saisie brute
Il ne remplace pas la précision du contrôle standard K2, mais propose une interaction différente.
Gestion des minutes configurable
L’option MinuteStep permet de définir l’intervalle de sélection des minutes : 1, 5, 10, 15 ou 30 minutes.
Cette configuration est particulièrement utile pour des scénarios de réservation, de planification ou de créneaux horaires prédéfinis.
Mode avec secondes (optionnel)
L’option ShowSeconds permet d’ajouter un troisième cadran pour la sélection des secondes, lorsque le niveau de précision le nécessite.
Initialisation automatique
Avec DefaultToNow, le contrôle peut s’initialiser automatiquement avec l’heure courante si aucune valeur n’est définie.
Propriétés principales
- MinuteStep : Intervalle de sélection des minutes
- ShowSeconds : Activation du cadran des secondes
- DefaultToNow : Initialisation automatique à l’heure courante
Événements disponibles
- OnChanged : Déclenché à chaque modification
- OnFocus / OnBlur : Gestion du focus
- Opened : Déclenché à l’ouverture du sélecteur
Cas d’usage concrets
Réservation de salles de réunion
Avec MinuteStep="15", les utilisateurs sélectionnent uniquement des créneaux valides, sans logique de validation supplémentaire.
Pointage des heures
L’option DefaultToNow="true" facilite la saisie rapide de l’heure courante.
Planification de tâches techniques
Le mode secondes permet une saisie précise pour des traitements techniques ou des logs.
Formulaires RH
Une interface visuelle améliore la lisibilité et l’adhésion des utilisateurs lors de la saisie d’heures.
Points techniques à noter
- Format de sortie : HH:mm ou HH:mm:ss
- Fiabilité : équivalente au contrôle standard K2
- Validation native : compatible avec le moteur K2
- Responsive : adaptation à la taille du conteneur
- Type de données : compatible DateTime
- Accessibilité : support de IsVisible et IsEnabled
Comparaison des approches
| Time Picker standard K2 | Clock Time Picker Control |
|---|---|
| Champ numérique avec incréments | Cadran analogique interactif |
| Interaction type desktop | Interaction inspirée mobile |
| Très précis et performant | Tout aussi précis |
| UX fonctionnelle | UX plus visuelle et immersive |
Conclusion
Le K2 Clock Time Picker Control n’a pas vocation à remplacer le contrôle standard de saisie d’heure, qui reste parfaitement adapté à de nombreux cas.
Il propose une alternative ergonomique lorsque l’expérience utilisateur, la lisibilité et le confort de saisie sont prioritaires.
Pour certains formulaires — RH, réservations, planification — cette approche visuelle peut réellement améliorer l’adhésion des utilisateurs.
Si vous souhaitez enrichir vos SmartForms K2 avec des contrôles orientés UX, ce time picker s’intègre naturellement dans votre environnement.
Bon dev et bonne saisie d’heures !
