0

Magento ver 2.4.3

I want to add placeholder on DOB field.

Please let me know the right way to add this.

Thanks

2
0

below is path of magento block file which is calling $block->getFieldHtml() method

/vendor/magento/module-customer/Block/Widget/Dob.php

please override this method and add below code

I added 'placeholder' => 'Your PlaceHolder Text' in below function

 public function getFieldHtml()
    {
        $this->dateElement->setData(
            [
                'extra_params' => $this->getHtmlExtraParams(),
                'name' => $this->getHtmlId(),
                'id' => $this->getHtmlId(),
                'class' => $this->getHtmlClass(),
                'value' => $this->getValue(),
                'date_format' => $this->getDateFormat(),
                'image' => $this->getViewFileUrl('Magento_Theme::calendar.png'),
                'years_range' => '-120y:c+nn',
                'max_date' => '-1d',
                'change_month' => 'true',
                'change_year' => 'true',
                'show_on' => 'both',
                'first_day' => $this->getFirstDay(),
                'placeholder' => 'Your PlaceHolder Text'
            ]
        );
        return $this->dateElement->getHtml();
    }

Note: Don't add directly in core file. it's bad practice and It will be reverted if you upgrade your magento version.

0

you can override the block file

vendor/magento/framework/View/Element/Html/Date.php

Create Date Class in your new module:

<?php
    /**
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */
    namespace Vendor\Module\Model;
    
    /**
     * Date element block
     */
    class Date extends \Magento\Framework\View\Element\Html\Date
    {
        /**
         * Render block HTML
         *
         * @return string
         * @SuppressWarnings(PHPMD.NPathComplexity)
         */
        protected function _toHtml()
        {
            $html = '<input placeholder="Your PlaceHolder Text" type="text" name="' . $this->getName() . '" id="' . $this->getId() . '" ';
            $html .= 'value="' . $this->escapeHtml($this->getValue()) . '" ';
            $html .= 'class="' . $this->getClass() . '" ' . $this->getExtraParams() . '/> ';
            $calendarYearsRange = $this->getYearsRange();
            $changeMonth = $this->getChangeMonth();
            $changeYear = $this->getChangeYear();
            $maxDate = $this->getMaxDate();
            $showOn = $this->getShowOn();
            $firstDay = $this->getFirstDay();
    
            $html .= '<script type="text/javascript">
                require(["jquery", "mage/calendar"], function($){
                        $("#' .
                $this->getId() .
                '").calendar({
                            showsTime: ' .
                ($this->getTimeFormat() ? 'true' : 'false') .
                ',
                            ' .
                ($this->getTimeFormat() ? 'timeFormat: "' .
                $this->getTimeFormat() .
                '",' : '') .
                '
                            dateFormat: "' .
                $this->getDateFormat() .
                '",
                            buttonImage: "' .
                $this->getImage() .
                '",
                            ' .
                ($calendarYearsRange ? 'yearRange: "' .
                $calendarYearsRange .
                '",' : '') .
                '
                            buttonText: "' .
                (string)new \Magento\Framework\Phrase(
                    'Select Date'
                ) .
                '"' . ($maxDate ? ', maxDate: "' . $maxDate . '"' : '') .
                ($changeMonth === null ? '' : ', changeMonth: ' . $changeMonth) .
                ($changeYear === null ? '' : ', changeYear: ' . $changeYear) .
                ($showOn ? ', showOn: "' . $showOn . '"' : '') .
                ($firstDay ? ', firstDay: ' . $firstDay : '') .
                '})
                });
                </script>';
    
            return $html;
        }
    }

Create di.xml :

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Framework\View\Element\Html\Date" type="Vendor\Module\Model\Date"/>
</config>

Note: you can add placeholder text according to your requirement in the above input field

Example : placeholder="Your PlaceHolder Text"

ScreenShot : https://prnt.sc/1vzmqj2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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