How is the «Date of Birth» calendar implemented on the frontend «Edit Account Information» page?

dmitrii_fediuk · March 30, 2016, 12:33pm

magento/magento2/blob/ce68a6d/app/code/Magento/Customer/view/frontend/templates/form/edit.phtml#L17-L17


<?php $_dob = $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Dob') ?>

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Customer/view/frontend/templates/form/edit.phtml#L20-L22


<?php if ($_dob->isEnabled()): ?>
    <?php echo $_dob->setDate($block->getCustomer()->getDob())->toHtml() ?>
<?php endif ?>

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Customer/view/frontend/templates/widget/dob.phtml#L10-L27


USAGE:


Simple:


<?php echo $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Dob')
->setDate($block->getCustomer()->getDob())
->toHtml() ?>


For checkout/onepage/billing.phtml:


<?php echo $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Dob')
->setDate($block->getCustomer()->getDob())
->setFieldIdFormat('billing:%s')
->setFieldNameFormat('billing[%s]')
->toHtml() ?>


NOTE: Regarding styles - if we leave it this way, we'll move it to boxes.css
   Alternatively we could calculate widths automatically using block input parameters.

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Customer/view/frontend/templates/widget/dob.phtml#L34-L46


<?php
$fieldCssClass = 'field date field-' . $block->getHtmlId();
$fieldCssClass .= $block->isRequired() ? ' required' : '';
?>
<div class="<?php /* @escapeNotVerified */ echo $fieldCssClass; ?>">
<label class="label" for="<?php echo $block->getHtmlId()?>"><span><?php /* @escapeNotVerified */ echo $block->getLabel() ?></span></label>
<div class="control customer-dob">
    <?php echo $block->getFieldHtml(); ?>
    <?php if ($_message = $block->getAdditionalDescription()) : ?>
        <div class="note"><?php /* @escapeNotVerified */ echo $_message; ?></div>
    <?php endif; ?>
</div>
</div>

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Customer/Block/Widget/Dob.php#L175-L191


public function getFieldHtml()
{
    $this->dateElement->setData([
        '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'
    ]);
    return $this->dateElement->getHtml();
}

dmitrii_fediuk · March 30, 2016, 12:51pm