Add date picker on customer registration form in magento 2.2

Question

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.

Answer 1

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