Comment utiliser un composant d'interface utilisateur jQuery DatePicker dans votre application Web

Un sélecteur de date permet à vos utilisateurs d'entrer facilement et rapidement une date dans un champ de saisie du calendrier. Découvrez la différence entre un sélecteur de date HTML standard et le DatePicker de Kendo UI.

Dans le dernier épisode vous avez vu comment le NumericTextBox pouvait être utilisé pour formater différents types de formats numériques. contribution. Dans cet épisode, vous en apprendrez plus sur le DatePicker . En un mot, le DatePicker est un composant qui permet aux utilisateurs de sélectionner une date dans un calendrier ou de la saisir dans un champ de saisie.

L'avantage d'utiliser un sélecteur de date est que la saisie de dates devient plus facile pour l'utilisateur et que vous pouvez contrôler le format des données que vous recevez. Les sélecteurs de date peuvent être utilisés dans les applications pour choisir les dates de réservation d'hôtel, de départ des vols ou de rendez-vous. Nous examinerons ensuite les différences entre un sélecteur de date HTML et le composant Kendo UI DatePicker .

Type d'entrée de date HTML

Un sélecteur de date HTML est créé en définissant l'attribut de type d'un élément d'entrée sur date . Vous pouvez limiter l'entrée en définissant les attributs min et max sur l'élément. L'attribut value représente la date sélectionnée. L'attribut min est la date la plus ancienne pouvant être sélectionnée et l'attribut max est la dernière date pouvant être sélectionnée. Pour chaque attribut, la date doit avoir le format aaaa / mm / jj . Le format de saisie des dates dans le champ de saisie est mm / jj / aaaa . Voici un exemple de sélecteur de date avec une valeur actuelle et minimale du 6 août 2018 et une valeur maximale du 20 août 2018:

L'entrée est dotée de commandes permettant d'augmenter ou de diminuer individuellement la valeur du mois, du jour et de l'année, ainsi que d'un bouton permettant d'ouvrir le sélecteur de date. Les dates en dehors de la plage pouvant être sélectionnée sont grisées dans le sélecteur de date. Les sections de l'entrée pour le mois et l'année de cet exemple ont été désactivées afin que l'utilisateur ne puisse pas entrer de dates restreintes. L'une des limitations de la saisie de date HTML est que le sélecteur de date n'est pas disponible pour tous les navigateurs et que le format des dates ne peut pas être modifié.

Kendo UI DatePicker

L'interface utilisateur de Kendo DatePicker en offre beaucoup plus contrôle de l'apparence des dates et du comportement du composant. Contrairement à un sélecteur de date HTML, l'interface utilisateur de Kendo DatePicker comporte un pied de page qui affiche la date actuelle. De plus, le champ de saisie du composant ne limite pas les valeurs pouvant être entrées par défaut. Ceci doit être défini explicitement avec l'option dateInput . Voici un sélecteur de date par défaut utilisant le thème, le thème matériel et le thème bootstrap par défaut: