0

I want to add DOB field on customer registration page with 3 dropdowns as Day, month and year (datepicker) Can anyone help me in that? Currently the DOB field is just a text box.

1 Answer 1

0

To add new field in customer registration form, orverride register.phtml in your theme.

Copy file from core - module-customer/view/frontend/templates/form/register.phtml

And place it in your theme on same path like below- app/design/frontend/vendor/theme/Magento_Customer/templates/form/register.phtml

Then, add your custom field using jquery datepicker like below.:

<div class="field required">
<label for="dob" class="label"><span><?= __('Date of Birth') ?></span></label>
<div class="control">
    <input name="dob" id="datepicker" title="Date of Birth" value="" type="text">
                <script type="text/javascript">
                require([
                    "jquery",
                    "mage/calendar"
                    ], function($){
                      $('#datepicker').datepicker({
                           prevText: '&#x3c;zurück', prevStatus: '',
                            prevJumpText: '&#x3c;&#x3c;', prevJumpStatus: '',
                            nextText: 'Vor&#x3e;', nextStatus: '',
                            nextJumpText: '&#x3e;&#x3e;', nextJumpStatus: '',
                            monthNames: ['Januar','Februar','März','April','Mai','Juni',
                            'Juli','August','September','Oktober','November','Dezember'],
                            monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
                            'Jul','Aug','Sep','Okt','Nov','Dez'],
                            dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
                            dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                            dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                          showMonthAfterYear: false,
                          dateFormat:'d.m.yy'
                        } 
                      );
                    });
                </script>
</div>

Create the Customer Attribute:

You need to create a new customer attribute by adding below in you custom module.

Create InstallData.php in following path Vendor\Module\Setup

InstallData.php

  <?php
  /**
   * Copyright © 2016 Magento. All rights reserved.
   * See COPYING.txt for license details.
   */
  namespace Vendor\Module\Setup;

  use Magento\Customer\Setup\CustomerSetupFactory;
  use Magento\Customer\Model\Customer;
  use Magento\Eav\Model\Entity\Attribute\Set as AttributeSet;
  use Magento\Eav\Model\Entity\Attribute\SetFactory as AttributeSetFactory;
  use Magento\Framework\Setup\InstallDataInterface;
  use Magento\Framework\Setup\ModuleContextInterface;
  use Magento\Framework\Setup\ModuleDataSetupInterface;

  /**
   * Install data
   * @codeCoverageIgnore
   */
  class InstallData implements InstallDataInterface
  {

      /**
       * CustomerSetupFactory
       * @var CustomerSetupFactory
       */
      protected $customerSetupFactory;

      /**
       * $attributeSetFactory
       * @var AttributeSetFactory
       */
      private $attributeSetFactory;

      /**
       * initiate object
       * @param CustomerSetupFactory $customerSetupFactory
       * @param AttributeSetFactory $attributeSetFactory
       */
      public function __construct(
          CustomerSetupFactory $customerSetupFactory,
          AttributeSetFactory $attributeSetFactory
      )
      {
          $this->customerSetupFactory = $customerSetupFactory;
          $this->attributeSetFactory = $attributeSetFactory;
      }

      /**
       * install data method
       * @param ModuleDataSetupInterface $setup
       * @param ModuleContextInterface $context
       */
      public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
      {

          /** @var CustomerSetup $customerSetup */
          $customerSetup = $this->customerSetupFactory->create(['setup' => $setup]);

          $customerEntity = $customerSetup->getEavConfig()->getEntityType('customer');
          $attributeSetId = $customerEntity->getDefaultAttributeSetId();

          /** @var $attributeSet AttributeSet */
          $attributeSet = $this->attributeSetFactory->create();
          $attributeGroupId = $attributeSet->getDefaultGroupId($attributeSetId);
          /**
           * customer registration form default field mobile number
           */
          $customerSetup->addAttribute(Customer::ENTITY, 'dob', [
              'type' => 'varchar',
              'label' => 'Date of Birth',
              'input' => 'text',
              'required' => true,
              'visible' => true,
              'user_defined' => true,
              'sort_order' => 1000,
              'position' => 1000,
              'system' => 0,
          ]);
          //add attribute to attribute set
          $attribute = $customerSetup->getEavConfig()->getAttribute(Customer::ENTITY, 'dob')
              ->addData([
                  'attribute_set_id' => $attributeSetId,
                  'attribute_group_id' => $attributeGroupId,
                  'used_in_forms' => ['adminhtml_customer', 'customer_account_create'],
              ]);

          $attribute->save();


      }
  }

After that run below command:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
php bin/magento cache:clean

It will show as below enter image description here

5
  • i want to use this for DOB field in customer registration form. How can i do that? Jan 20, 2022 at 8:21
  • @NicolaSmith I have edited my answer to add new field DOB in customer registration form Jan 21, 2022 at 9:22
  • Can you help me in adding a new checkbox field also on the customer registration form/ Jan 24, 2022 at 8:55
  • @NicolaSmith If the changes worked for you, please accept the answer. You can add checkbox in similar way like DOB. Add input type = checkbox, without script Jan 24, 2022 at 9:57
  • I dont need this type of date picker. I need 3 dropdowns as date , month and year for easy selection Jan 24, 2022 at 10:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.