Un datapicker JavaScript rafraîchissant

• Léger (moins de 5kb minifié et gzippé)
• Pas de dépendances (mais joue bien avec Moment.js)
• Des classes CSS modulaires pour un style facile

Essayer la démo de Pikaday →

Prête pour la production ? Depuis la version 1.0.0, Pikaday est stable et utilisé en production. Si toutefois vous trouvez des bogues ou si vous avez des demandes de fonctionnalités, veuillez les soumettre sur le traqueur de problèmes GitHub.Voir aussi le changelog

Installation

Vous pouvez installer Pikaday comme un paquet NPM:

npm install pikaday

Ou lier directement au CDN:

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

Styles

Vous devrez aussi inclure le fichier CSS de Pikaday. Cette étape dépend de la façon dont Pikaday a été installé. Soit importer depuis NPM:

@import './node_modules/pikaday/css/pikaday.css';

Ou lier au CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

Utilisation

Pikaday peut être lié à un champ de saisie :

<input type="text">

Ajouter le JavaScript à la fin de votre document:

<script src="pikaday.js"></script><script> var picker = new Pikaday({ field: document.getElementById('datepicker') });</script>

Si vous utilisez jQuery assurez-vous de ne passer que le premier élément :

var picker = new Pikaday({ field: $('#datepicker') });

Si l’instance Pikaday n’est pas liée à un champ, vous pouvez ajouter l’élément n’importe où:

var field = document.getElementById('datepicker');var picker = new Pikaday({ onSelect: function(date) { field.value = picker.toString(); }});field.parentNode.insertBefore(picker.el, field.nextSibling);

Formatage

Par défaut, les dates sont formatées et analysées en utilisant l’objet standard JavaScript Date.Si Moment.js est disponible dans la portée, il sera utilisé pour formater et analyser les valeurs d’entrée. Vous pouvez passer une option supplémentaire format à la configuration qui sera transmise au constructeur moment.Voir l’exemple moment.js pour une version complète.

<input type="text" value="9 Oct 2014"><script src="moment.js"></script><script src="pikaday.js"></script><script> var picker = new Pikaday({ field: document.getElementById('datepicker'), format: 'D MMM YYYY', onSelect: function() { console.log(this.getMoment().format('Do MMMM YYYY')); } });</script>

Pour un formatage plus avancé et plus flexible, vous pouvez passer votre propre fonction toString à la configuration qui sera utilisée pour formater l’objet date.Cette fonction a la signature suivante:

toString(date, format = 'YYYY-MM-DD')

Vous devriez en retourner une chaîne de caractères.

Faites attention, cependant. Si la chaîne formatée que vous retournez ne peut pas être correctement analysée par la méthode Date.parse (ou par moment si elle est disponible), alors vous devez fournir votre propre fonction parse dans la config. Cette fonction se verra passer la chaîne formatée et le format :

parse(dateString, format = 'YYYY-MM-DD')

var picker = new Pikaday({ field: document.getElementById('datepicker'), format: 'D/M/YYYY', toString(date, format) { // you should do formatting based on the passed format, // but we will just return 'D/M/YYYY' for simplicity const day = date.getDate(); const month = date.getMonth() + 1; const year = date.getFullYear(); return `${day}/${month}/${year}`; }, parse(dateString, format) { // dateString is the result of `toString` method const parts = dateString.split('/'); const day = parseInt(parts, 10); const month = parseInt(parts, 10) - 1; const year = parseInt(parts, 10); return new Date(year, month, day); }});

Configuration

Comme les exemples le démontrent ci-dessusPikaday dispose de nombreuses options utiles :

• field lier le datepicker à un champ de formulaire
• trigger utiliser un élément différent pour déclencher l’ouverture du datepicker, voir exemple de déclenchement (par défaut field)
• bound afficher/masquer automatiquement le datepicker sur field focus (par défaut true si field est défini)
• ariaLabel attribut de données sur le champ de saisie avec un texte d’assistance aria (uniquement appliqué lorsque bound est défini)
• position position préférée du datepicker par rapport au champ de formulaire, par ex.g. : top right, bottom right Remarque : un ajustement automatique peut se produire pour éviter que le datepicker ne soit affiché en dehors du viewport, voir l’exemple des positions (par défaut, ‘en bas à gauche’)
• reposition peut être défini sur false pour ne pas repositionner le datepicker dans le viewport, le forçant à prendre la position configurée position (par défaut : true)
• container nœud DOM pour rendre le calendrier dans, voir l’exemple du conteneur (par défaut : undefined)
• format le format de sortie par défaut pour la valeur .toString() et field (nécessite Moment.js pour le formatage personnalisé)
• formatStrict le drapeau par défaut pour l’analyse stricte de la date de Moment (nécessite Moment.js pour le formatage personnalisé)
• toString(date, format) fonction qui sera utilisée pour le formatage personnalisé. Cette fonction aura la priorité sur moment.
• parse(dateString, format) fonction qui sera utilisée pour analyser la chaîne d’entrée et en obtenir un objet date. Cette fonction aura la priorité sur moment.
• defaultDate la date initiale à afficher lors de la première ouverture
• setDefaultDate Booléen (vrai/faux). faire de defaultDate la valeur initiale sélectionnée
• firstDay premier jour de la semaine (0 : dimanche, 1 : lundi, etc)
• minDate la date minimale/précoce qui peut être sélectionnée (cela devrait être un objet Date natif – par ex.p. ex. new Date() ou moment().toDate())
• maxDate la date maximale/dernière qui peut être sélectionnée (ceci devrait être un objet Date natif – p. ex. new Date() ou moment().toDate())
• disableWeekends interdire la sélection des samedis ou dimanches
• disableDayFn fonction de rappel qui reçoit un objet Date pour chaque jour dans la vue. Devrait retourner true pour désactiver la sélection de ce jour.
• yearRange nombre d’années de part et d’autre (par exemple 10) ou tableau de plage supérieure/inférieure (par exemple. )
• showWeekNumber afficher le numéro de semaine ISO en tête de ligne (par défaut false)
• pickWholeWeek sélectionner une semaine entière au lieu d’un jour (par défaut false)
• isRTL inverser le calendrier pour les langues de droite àgauche
• i18n langues par défaut pour les noms de mois et de jours de semaine (voir l’internationalisation ci-dessous)
• yearSuffix texte supplémentaire à ajouter à l’année dans le titre
• showMonthAfterYear rendre le mois après l’année dans le titre (par défaut false)
• showDaysInNextAndPreviousMonths rendre les jours de la grille du calendrier qui tombent dans les mois suivants ou précédents (par défaut : false)
• enableSelectionDaysInNextAndPreviousMonths permet à l’utilisateur de sélectionner la date qui se trouve dans les mois suivants ou précédents (par défaut : false)
• numberOfMonths nombre de calendriers visibles
• mainCalendar lorsque numberOfMonths est utilisé, cela vous aidera à choisir où sera le calendrier principal (par défaut left, peut être défini à right). Utilisé uniquement pour le premier affichage ou lorsqu’une date sélectionnée n’est pas déjà visible
• events tableau de dates que vous souhaitez différencier des jours ordinaires (par ex. )
• theme définir un nom de classe qui peut être utilisé comme un crochet pour styliser différents thèmes, voir exemple de thème (par défaut null)
• blurFieldOnSelect définit si le champ est flou quand une date est sélectionnée (par défaut true)
• onSelect fonction de rappel pour quand une date est sélectionnée
• onOpen fonction de rappel pour quand le sélecteur devient visible

.

• onClose fonction de rappel pour lorsque le sélecteur est caché
• onDraw fonction de rappel pour lorsque le sélecteur dessine un nouveau mois
• keyboardInput activer la prise en charge de la saisie au clavier (par défaut true)

Style

Si l’option de configuration reposition-.est activée (par défaut), Pikaday appliquera des classes CSS au datepicker en fonction de son positionnement :

• top-aligned
• left-aligned
• right-aligned
• bottom-aligned

Notez que l’élément DOM à tout moment aura généralement 2 classes CSS (ex. top-aligned right-aligned etc).

Plugin jQuery

La version normale de Pikaday ne nécessite pas jQuery, cependant il y a un plugin jQuery si cela flotte sur votre bateau (voir plugins/pikaday.jquery.js dans le dépôt). Cette version nécessite jQuery, naturellement, et peut être utilisée comme d’autres plugins:Voir l’exemple jQuery pour une version complète.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="pikaday.js"></script><script src="plugins/pikaday.jquery.js"></script><script>// activate datepickers for all elements with a class of `datepicker`$('.datepicker').pikaday({ firstDay: 1 });// chain a few methods for the first datepicker, jQuery style!$('.datepicker').eq(0).pikaday('show').pikaday('gotoYear', 2042);</script>

Support AMD

Si vous utilisez un chargeur de script modulaire, Pikaday n’est pas lié à l’objet global et s’intégrera parfaitement dans votre processus de construction. Vous pouvez exiger Pikaday comme n’importe quel autre module.Voir l’exemple AMD pour une version complète.

require(, function(Pikaday) { var picker = new Pikaday({ field: document.getElementById('datepicker') });});

La même chose s’applique pour le plugin jQuery mentionné ci-dessus.Voir l’exemple AMD jQuery pour une version complète.

require(, function($) { $('#datepicker').pikaday();});

Support des modules CommonJS

Si vous utilisez un environnement compatible CommonJS, vous pouvez utiliser la fonction require pour importer Pikaday.

var pikaday = require('pikaday');

Lorsque vous regroupez tous vos modules requis avec Browserify et que vous n’utilisez pas Moment.js, spécifiez l’option ignore:

browserify main.js -o bundle.js -i moment

Ruby on Rails

Si vous utilisez Ruby on Rails, assurez-vous de vérifier la gemme Pikaday.

Méthodes

Vous pouvez contrôler le sélecteur de date après la création :

var picker = new Pikaday({ field: document.getElementById('datepicker') });

Get and set date

picker.toString('YYYY-MM-DD')

Retourne la date sélectionnée dans un format de chaîne. Si Moment.js existe (recommandé) alors Pikaday peut retourner n’importe quel format que Moment comprend.Vous pouvez également fournir votre propre fonction toString et faire le formatage vous-même. Lisez plus dans la section formatage.

Si ni l’objet moment n’existe ni la fonction toString n’est fournie, la méthode .toDateString() par défaut de JavaScript sera utilisée.

picker.getDate()

Retourne un objet JavaScript de base Date du jour sélectionné, ou null si aucune sélection.

picker.setDate('2015-01-01')

Définir la sélection actuelle. Celle-ci sera restreinte dans les limites des options minDate et maxDate si elles sont spécifiées. Vous pouvez éventuellement passer un booléen comme deuxième paramètre pour empêcher le déclenchement du callback onSelect (true), permettant à la date d’être fixée silencieusement.

picker.getMoment()

Retourne un objet Moment.js pour la date sélectionnée (Moment doit être chargé avant Pikaday).

picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))

Retourne la sélection courante avec un objet Moment.js (voir setDate pour les détails).

Effacer et réinitialiser la date

picker.clear()

Efface et réinitialise l’entrée où le sélecteur est lié.

Changer la vue actuelle

picker.gotoDate(new Date(2014, 1))

Changer la vue actuelle pour voir une date spécifique. Cet exemple sautera à février 2014 (le mois est un indice basé sur zéro).

picker.gotoToday()

Shortcut pour picker.gotoDate(new Date())

picker.gotoMonth(2)

Changer la vue actuelle par mois (0 : janvier, 1 : février, etc).

picker.nextMonth()picker.prevMonth()

Aller au mois suivant ou précédent (cela changera l’année si nécessaire).

picker.gotoYear()

Changer l’année visualisée.

picker.setMinDate()

Mettre à jour la date minimale/la plus ancienne qui peut être sélectionnée.

Mettre à jour la date maximale/la plus récente qui peut être sélectionnée.

picker.setStartRange()

Mettre à jour la date de début de plage. Pour utiliser deux instances Pikaday pour sélectionner une plage de dates.

picker.setEndRange()

Mettre à jour la date de fin de plage. Pour utiliser deux instances Pikaday pour sélectionner une plage de dates.

Afficher et masquer le sélecteur de date

picker.isVisible()

Retourne true ou false.

picker.show()

Rendre le sélecteur visible.

picker.adjustPosition()

Recalculer et modifier la position du sélecteur.

picker.hide()

Cacher le sélecteur en le rendant invisible.

picker.destroy()

Cacher le sélecteur et supprimer tous les écouteurs d’événements – pas de retour en arrière !

Internationalisation

Le format de configuration i18n par défaut ressemble à ceci :

i18n: { previousMonth : 'Previous Month', nextMonth : 'Next Month', months : , weekdays : , weekdaysShort : }

Vous devez fournir 12 mois et 7 jours de la semaine (avec abréviations). Spécifiez toujours les jours de la semaine dans cet ordre, le dimanche en premier. Vous pouvez modifier l’option firstDay pour réordonner si nécessaire (0 : dimanche, 1 : lundi, etc). Vous pouvez également définir isRTL à true pour les langues qui sont lues de droite à gauche.

Extensions

Timepicker

Pikaday est un pur datepicker. Il ne prendra pas en charge le choix d’une heure de la journée. Cependant, il y a eu des efforts pour ajouter le support de l’heure à Pikaday.Voir #1 et #18. Ceux-ci résident dans leur propre fork.

Vous pouvez utiliser le travail que @owenmead a fait le plus récemment à owenmead/PikadayUne approche de sélection de temps plus simple faite par @xeeali à xeeali/Pikaday est basée sur la version 1.2.0.Aussi @stas a un fork stas/Pikaday, mais il est maintenant assez vieux

Compatibilité des navigateurs

• IE 7+
• Chrome 8+
• Firefox 3.5+
• Safari 3+
• Opera 10.6+

Auteurs

• David Bushell https://dbushell.com @dbushell
• Ramiro Rikkert GitHub @RamRik

Merci à @shoogledesigns pour le nom.