- Utilisé en prod: Oui
- Version utilisée: v4.6.1 (dernière en date le 04/07/2019)
- Compatibilité approuvée avec jQuery version: 1.10.2
Plugin Flatpickr: astuces d’utilisation
Plugin Flatpickr: problèmes rencontrés et solutions (troubleshooting)
Ne pas utiliser d’input type= »date »
L'input type="date"
fera apparaître le datepicker natif du navigateur en plus de celui du plugin Flatpickr. Il faut utiliser input type="text"
.
Conflits avec la librairie JS Prototype et l’utilisation par Flatpickr de la méthode .map()
Merci Kévin pour avoir remonté le problème et fourni une solution 🙂
Les sources de Flatpickr utilisent la méthode .map()
qui génère des conflits lorsque la librairie JS Prototype est également chargée dans la page. C’est le cas, notamment, de tous les projets Magento 1.9.x.
Il faut modifier le code source de Flatpickr comme suit (ici, la version 4.6.1 minifiée). Repérer les 3 lignes suivantes (269-271 normalement) :
|
return void 0 !== i.formatDate ? i.formatDate(e, t, a) : t.split("").map(function (t, n, o) { return h[t] && "\\" !== o[n - 1] ? h[t](e, a, i) : "\\" !== t ? t : "" }).join("") |
…et les remplacer par:
|
// Fallback for Flatpickr utilization on pages that load Prototype JS. Indeed, Prototype overide the map // function and its implementation doesn't manage the thrird parameter. if (typeof Prototype == "object") { return void 0 !== i.formatDate ? i.formatDate(e, t, a) : t.split("").map(function (t, n) { return h[t] && "\\" !== this[n - 1] ? h[t](e, a, i) : "\\" !== t ? t : "" }, t).join("") } else { return void 0 !== i.formatDate ? i.formatDate(e, t, a) : t.split("").map(function (t, n, o) { return h[t] && "\\" !== o[n - 1] ? h[t](e, a, i) : "\\" !== t ? t : "" }).join("") } |
Plugin : astuces d’utilisation
Plugin : problèmes rencontrés et solutions (troubleshooting)
Version utilisée: ()
Compatibilité approuvée avec jQuery version: 1.10.2
Plugin : astuces d’utilisation
Plugin : problèmes rencontrés et solutions (troubleshooting)