Comment utiliser les sélecteurs de date et d'heure dans votre application Web

Les outils DatePicker, TimePicker et DateTimePicker permettent à vos utilisateurs de saisir des dates et des heures dans divers cas d'utilisation. Jetons un coup d'œil à leurs différences et à leurs similitudes.

Dans cet article, nous allons continuer à examiner davantage de fonctionnalités du composant ` DatePicker ` pour Kendo UI . , et introduisons le `TimePicker` et le` DateTimePicker`. Un `TimePicker` est un champ de texte qui vous permet de sélectionner une heure dans une liste déroulante. Le `DateTimePicker` est un champ de texte qui vous permet de sélectionner la date et l'heure à partir d'un calendrier et d'une liste déroulante.

Ces trois sélecteurs différents vous offrent une plus grande flexibilité pour gérer davantage de cas d'utilisation dans vos applications. Un sélecteur de date pourrait être utilisé pour sélectionner les dates de naissance ou réserver une date d'hôtel. Un sélecteur de temps peut être utilisé dans le formulaire de recherche d’une compagnie aérienne pour sélectionner les heures de vol. Et un sélecteur de date et d'heure pourrait être utilisé pour planifier des réunions ou faire des réservations pour le dîner. À venir, vous apprendrez à implémenter chaque composant.

DatePicker

Un des avantages de l’utilisation de `DatePicker` est la facilité avec laquelle vous pouvez naviguer dans les dates. En cliquant sur l'en-tête du calendrier, vous pouvez le parcourir mois par mois. Pour changer la profondeur de navigation, configurez l'option `depth`. Si vous choisissez de le définir en année, le sélecteur affiche les mois dans la vue. Si vous le définissez sur décennie, il affiche les années. Et si vous le définissez au siècle, cela indique des décennies.

Il est pratique de naviguer par mois si vous utilisez le sélecteur pour quelque chose comme une réservation d'hôtel. Vous pouvez naviguer par année, par décennie ou par siècle si le sélecteur est utilisé pour rechercher des données historiques sur une longue période. Dans ce cas, il est utile de définir la vue de départ du sélecteur à l’aide de l’option `start`. Cela vous permet de passer à un mois, une année, une décennie ou un siècle en particulier sans devoir parcourir le sélecteur. Dans l'exemple suivant, la vue du sélecteur commence par la décennie. Une fois la sélection effectuée, vous pouvez naviguer par année.

`` `js

Source link