web-dev-qa-db-fra.com

Comment éviter la datepicker pour assurer le flux du clavier tout en maintenant la cohérence dans l'application?

Il y a des fonctionnalités dans mon application qui ont une fréquence d'utilisation élevée et la tâche impliquant ces fonctionnalités devrait être terminée très rapidement. Ces fonctionnalités impliquent des tâches de saisie de données en série et le temps nécessaire pour effectuer ces transactions devrait diminuer avec l'augmentation de l'utilisation. Je veux éviter d'utiliser un datepicker car l'utilisateur devra arrêter le flux de ses doigts sur le clavier et ramasser la souris pour sélectionner la date.

Dans le même temps, je veux également fournir un sélecteur de dates pour d'autres ensembles de fonctionnalités qui ne sont pas aussi fréquemment utilisés, comme la génération de rapports pour une plage de dates sélectionnée, etc.

Comment garantir la cohérence de l'application tout en évitant le sélecteur de dates pour quelques fonctionnalités?

2
gurvinder372

Si je comprends bien, vous ne voulez pas interrompre le flux "d'utilisation transparente du clavier" en utilisant le sélecteur de date basé sur la souris et en même temps, vous avez besoin du composant Sélecteur de date dans certains autres scénarios.

Je dirais utiliser un champ de texte suggéré pour cela (avec le conseil au-dessus dans une police plus petite). En outre, vous pouvez utiliser l'événement OnFocus pour afficher le sélecteur de date sous le champ de texte (pour maintenir la cohérence). N'oubliez pas d'utiliser l'OnBlur pour masquer le sélecteur de date et pensez également à la validation.

Voici ce que je veux dire:

Date Picker Example

1
Waleed Fahmy

Il semble que vous demandiez une alternative à un sélecteur de date en tant que composant de champ de date. Vous pouvez créer un composant de date intelligent qui accepte différents formats de date. Très similaire à la façon dont le champ de recherche Google anticipe votre requête de recherche lorsque vous tapez. J'imagine que l'interaction pourrait se passer comme ça.

  1. L'utilisateur commence à taper "1" et le composant donne à l'utilisateur trois choix juste en dessous du champ. "1", "11", "12". "1" en janvier, "11" en novembre et "12" en décembre.
  2. L'utilisateur peut accepter la première sélection en surbrillance en tapant "/" ou en appuyant sur la barre d'espace. Ils peuvent également utiliser la flèche haut/bas pour sélectionner les autres choix, puis utiliser le type "/" ou la barre d'espace pour accepter.
  3. Cette interaction se poursuivra jusqu'à ce que l'utilisateur ait terminé la date au format correct.

J'ai également vu un autre composant de date intelligent qui accepte le langage naturel comme entrée, puis formate correctement la date. Par exemple. L'utilisateur saisit "Vendredi prochain" et le composant calcule la date en fonction de la semaine et du jour en cours.

1
thomasyung