Share
Dans cette astuce, je vais vous montrer comment utiliser la nouvelle entrée de date HTML5, puis fournir une solution d'interface utilisateur de repli jQuery pour les navigateurs qui ne prennent pas encore en charge ce nouveau type d'entrée..
Nous y avons tous été. Vous avez créé un formulaire et vous devez maintenant entrer une date. Mais comment contrôlez-vous dans quel format ils entrent la date? Ne serait-il pas plus facile d'utiliser un contrôle de calendrier ou un sélecteur de date? Absolument! Malheureusement, seuls quelques navigateurs prennent en charge le nouveau format HTML5. rendez-vous amoureux type d'entrée. Ce n'est pas grave, nous allons utiliser l'interface utilisateur de jQuery pour fournir une solution de secours.!
Commençons par planifier l'avenir et supposons que l'utilisateur travaille dans un navigateur moderne prenant en charge un sélecteur de date..
Sélecteur de date
Au moment d'écrire ces lignes, seuls Webkit et Opera prennent en charge ce type de saisie. Dans Firefox et Internet Explorer, le navigateur utilise par défaut une simple zone de texte - ce qui n’est pas idéal.!
Utilisons l'interface utilisateur de jQuery pour compenser.
L'outil datepicker de l'interface utilisateur jQuery fonctionne à merveille et est un jeu d'enfant à "installer". Premièrement, nous téléchargeons une version personnalisée de jQuery UI, visitons la page de téléchargement et vérifions uniquement les éléments "Core" et "Datepicker". Laisser tout le reste décoché.
Cliquez sur Télécharger et vous recevrez un zip contenant les fichiers nécessaires. Transférez le fichier jQuery UI ainsi que le répertoire CSS vers votre projet.
Avec jQuery UI importé dans notre arborescence de répertoires, nous devons ensuite inclure les fichiers nécessaires, en particulier les fichiers CSS et JavaScript..
Sélecteur de date
Notez la manière dont nous avons inclus notre feuille de style personnalisée jQuery UI, la bibliothèque jQuery (actuellement à la version 1.6) et le script personnalisé jQuery UI, que j'ai renommé. jquery-ui.js.
Accentsconagua
sélecteur de date Méthode Notre base est définie; maintenant, nous devons interroger le DOM pour l’élément d’entrée souhaité et appeler le sélecteur de date() méthode sur elle.
Ces quelques personnages seuls feront l'affaire. Si nous voyons maintenant la page dans Firefox et que nous cliquons sur l'élément d'entrée, vous verrez le sélecteur de date en vigueur..
Ce que nous avons ici fonctionne, mais il y a un problème. Si nous retournons à un navigateur avancé tel que Chrome, nous sommes maintenant en double. Les sélecteurs de date natifs et de repli sont actifs simultanément. Nous avons besoin d’un moyen de spécifier cela, si le navigateur prend en charge la rendez-vous amoureux type d'entrée, ne faites rien. C'est facile!
Sélecteur de date
Dans un projet du monde réel, vous devriez probablement faire abstraction de cette essai Code à sa propre méthode, ou utiliser Modernizr, mais cela fera l'affaire à des fins de test.
Dans le code ci-dessus, nous créons d’abord un élément d’entrée, puis essayons de définir son type attribut égal à rendez-vous amoureux. Maintenant, si le navigateur échoue à le faire - ce qui signifie qu'il ne comprend pas ce que le rendez-vous amoureux type est - nous pouvons alors supposer qu'il s'agit d'un navigateur plus ancien et fournir plutôt le repli de l'interface utilisateur jQuery. Simple!
L'outil Datepicker est livré avec une variété de remplacements; vous pouvez consulter la liste complète ici.
Examinons un couple ensemble. Que faire si vous voulez spécifier un format de date spécifique. Plutôt que A / M / J, nous préférerions utiliser Y-M-D. Pour ce faire, nous utilisons le format de date propriété.
$ ('# date'). datepicker (dateFormat: 'yy-mm-dd'); Eh bien c'était facile. Ensuite, supposons que nous voulions seulement que l'utilisateur puisse sélectionner une date d'ici à quatre jours. C'est un jeu d'enfant quand on utilise le maxDate option. Une caractéristique pratique est que nous pouvons utiliser des termes relatifs, tels que +4, pendant quatre jours à partir de maintenant..
$ ('# date'). datepicker (maxDate: +4); Nous ne faisons que gratter la surface ici, mais cela devrait vous aider à démarrer! Datepickers multi-navigateurs en quelques minutes!
