datepicker – devfrontend.info

Testé fonctionnel Magento 2.3, 2.4

Magento 2 Dev Docs – Custom form validation
Autre propos (pas top en terme d’UI, mais peut servir dans un autre cas d’override): DOB Validation with three fields in magento2
Magento 2 Get Current Store Date Time

Nous allons supprimer le widget calendar du champ date de naissance du formulaire de création de compte de Magento 2.
Attention: le champ Date de Naissance n’apparaît pas par défaut! Il faut l’activer via l’interface d’administration (Google est ton ami).

Demo en ligne de Cleave.js.

`app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml`:

Apporter plus d’attention au passages suivants:

data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' sur l'input type="text" permet la bonne validation de votre champ Date de Naissance
<script>require(['cleave'... qui initialise le masque de saisie sur le champ via le plugin Cleave.js

<?php
/** @var \Magento\Customer\Block\Widget\Dob $block */

$fieldCssClass = 'field date field-' . $block->getHtmlId();
$fieldCssClass .= $block->isRequired() ? ' required' : '';
?>
<div class="<?= $block->escapeHtmlAttr($fieldCssClass) ?>">
    <label class="label" for="<?= /* @noEscape */ $block->getHtmlId() ?>"><span><?= $block->escapeHtml($block->getStoreLabel('dob')) ?></span></label>
    <div class="control customer-dob">
        <input type="text"
               name="dob"
               id="dob"
               placeholder="jj/mm/aaaa"
               data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' />
        <?php if ($_message = $block->getAdditionalDescription()) : ?>
            <div class="note"><?= $block->escapeHtml($_message) ?></div>
        <?php endif; ?>
    </div>
</div>

<script>
    require([
        'cleave'
    ], function (Cleave) {
        var cleave = new Cleave('#dob', {
            date: true,
            delimiter: '/',
            datePattern: ['d', 'm', 'Y']
        });
    });
</script>

<?php

/** @var \Magento\Customer\Block\Widget\Dob $block */

$fieldCssClass = 'field date field-' . $block->getHtmlId();

$fieldCssClass .= $block->isRequired() ? ' required' : '';

<div class="<?= $block->escapeHtmlAttr($fieldCssClass) ?>">

<label class="label" for="<?= /* @noEscape */ $block->getHtmlId() ?>"><span><?= $block->escapeHtml($block->getStoreLabel('dob')) ?></span></label>

<input type="text"

name="dob"

id="dob"

placeholder="jj/mm/aaaa"

data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' />

<?php if ($_message = $block->getAdditionalDescription()) : ?>

<div class="note"><?= $block->escapeHtml($_message) ?></div>

<?php endif; ?>

</div>

require([

'cleave'

], function (Cleave) {

var cleave = new Cleave('#dob', {

date: true,

delimiter: '/',

datePattern: ['d', 'm', 'Y']

});

</script>

`app/design/frontend/MyVendor/mytheme/requirejs-config.js`:

var config = {
    map: {
        "*": {
            cleave: 'js/vendor/cleave/dist/cleave.min'
        }
    },
    [...]
};

var config = {

map: {

"*": {

cleave: 'js/vendor/cleave/dist/cleave.min'

}

[...]

};

Import des sources de Cleave.js dans le projet:

Au moment où j’ai mise en place cette fonctionnalité, la dernière version tagguée de Cleave.js était la v1.6.0, mais n’hésitez pas à mettre à jour avec une version supérieure si existante!

Placez la source minifiée dans app/design/frontend/MyVendor/mytheme/web/js/vendor/cleave/dist/cleave.min.js.

Champs <input type="date" />: datepickers
- Flatpickr
Champs input type="tel": téléphone
- International Telephone Input

`Champs <strong><code><input type="date" />`: datepickers

Flatpickr

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("")

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("")
}

// 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("")

}

Champs `<input type="tel" />`: téléphone

International Telephone Input

Utilisé en prod: Oui (https://www.stock-booking.com/ – Formulaire de demande de devis accessible depuis les fiches produit/entrepôt)
Version utilisée: v16.0.0 (et plus précisément, le build jQuery)
Compatibilité approuvée avec jQuery version: 1.10.2

Articles récents

Catégories

Archives

Méta

Étiquette : datepicker

[Magento 2] Un champ Date de Naissance custom avec validation côté javascript, placeholder et masque de saisie avec le plugin Cleave

`app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml`:

`app/design/frontend/MyVendor/mytheme/requirejs-config.js`:

Import des sources de Cleave.js dans le projet:

[UI/UX Design] Retours d’expérience sur des plugins JavaScript améliorant l’ergonomie des formulaires

`Champs <strong><code><input type="date" />`: datepickers

Flatpickr

Plugin Flatpickr: astuces d’utilisation

Plugin Flatpickr: problèmes rencontrés et solutions (troubleshooting)

Ne pas utiliser d’input type= »date »

Conflits avec la librairie JS Prototype et l’utilisation par Flatpickr de la méthode .map()

Champs `<input type="tel" />`: téléphone

International Telephone Input

Plugin : astuces d’utilisation

Plugin : problèmes rencontrés et solutions (troubleshooting)

Plugin : astuces d’utilisation

Plugin : problèmes rencontrés et solutions (troubleshooting)

app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml:

app/design/frontend/MyVendor/mytheme/requirejs-config.js:

Import des sources de Cleave.js dans le projet:

Champs <strong><code><input type="date" />: datepickers

Flatpickr

Plugin Flatpickr: astuces d’utilisation

Plugin Flatpickr: problèmes rencontrés et solutions (troubleshooting)

Ne pas utiliser d’input type= »date »

Conflits avec la librairie JS Prototype et l’utilisation par Flatpickr de la méthode .map()

Champs <input type="tel" />: téléphone

International Telephone Input

Plugin : astuces d’utilisation

Plugin : problèmes rencontrés et solutions (troubleshooting)

Plugin : astuces d’utilisation

Plugin : problèmes rencontrés et solutions (troubleshooting)

`app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml`:

`app/design/frontend/MyVendor/mytheme/requirejs-config.js`:

`Champs <strong><code><input type="date" />`: datepickers

Champs `<input type="tel" />`: téléphone