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).
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?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> |
app/design/frontend/MyVendor/mytheme/requirejs-config.js:
|
1 2 3 4 5 6 7 8 |
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.