How to Add Timezone & Locale Dropdown in Custom Form in Frontend in Magento 2

Magento 2 CMS is widely used global platform for online stores. The way we added week days list in Magento 2 for developers, likewise here we need to add timezone and locale dropdown for customers.

As Magento 2 stores serve customers from various location living in different time zones. And you are a business that offers on-call support, you may require to know the time zone of your customer’s location. Or if you have implemented shipping restrictions based on locale, you may require to know the locale information of your customer before accepting their orders.

In such scenarios, you may add timezone & locale dropdown in custom form in frontend in Magento 2 as shown below:

The timezone and locale in a custom form

Use the below code to get the customers’ time zone and locale data from the frontend as shown in the above figure.

Steps to Add Timezone & Locale Dropdown in Custom Form in Frontend in Magento 2

1. Add the below code in your block file.
   
   <?php namespace Meetanshi\Module\Block; use Magento\Framework\Locale\ListsInterface; use Magento\Framework\View\Element\Template; class CustomForm extends Template { protected $listInterface; public function __construct( Template\Context $context, ListsInterface $listInterface, array $data = [] ) { $this->listInterface = $listInterface; parent::__construct($context, $data); } public function getTimeZoneList() { $timezonesList = $this->listInterface->getOptionTimezones(); return $timezonesList; } public function getLocaleList() { $localeList = $this->listInterface->getOptionLocales(); return $localeList; } }

   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 32 33

   <?php   namespace Meetanshi\Module\Block;   use Magento\Framework\Locale\ListsInterface; use Magento\Framework\View\Element\Template;   class CustomForm extends Template {     protected $listInterface;       public function __construct(         Template\Context $context,         ListsInterface $listInterface,         array $data = []     )     {         $this->listInterface = $listInterface;         parent::__construct($context, $data);     }       public function getTimeZoneList()     {         $timezonesList = $this->listInterface->getOptionTimezones();         return $timezonesList;     }       public function getLocaleList()     {         $localeList = $this->listInterface->getOptionLocales();         return $localeList;     } }

2. Add the below code in your phtml file.
   
   <?php /** @var \Meetanshi\Module\Block\CustomForm $block */ $timezones = $block->getTimeZoneList(); $locales = $block->getLocaleList(); ?> <?php if (sizeof($timezones) > 0): ?> <div class="timezone"> <label for="timezone"><?php echo __('Select Timezone'); ?></label> <select name="timezone" id="timezone"> <?php foreach ($timezones as $timezone): ?> <option value="<?php echo $timezone['value']; ?>"><?php echo $timezone['label']; ?></option> <?php endforeach; ?> </select> </div> <?php endif; ?> <?php if (sizeof($locales) > 0): ?> <div class="locale"> <label for="locale"><?php echo __('Select Locale'); ?></label> <select name="locale" id="locale"> <?php foreach ($locales as $locale): ?> <option value="<?php echo $locale['value']; ?>"><?php echo $locale['label']; ?></option> <?php endforeach; ?> </select> </div> <?php endif; ?>

   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

   <?php /** @var  \Meetanshi\Module\Block\CustomForm $block */ $timezones = $block->getTimeZoneList(); $locales = $block->getLocaleList(); ?> <?php if (sizeof($timezones) > 0): ?>     <div class="timezone">         <label for="timezone"><?php echo __('Select Timezone'); ?></label>         <select name="timezone" id="timezone">             <?php foreach ($timezones as $timezone): ?>                 <option value="<?php echo $timezone['value']; ?>"><?php echo $timezone['label']; ?></option>             <?php endforeach; ?>         </select>     </div> <?php endif; ?> <?php if (sizeof($locales) > 0): ?>     <div class="locale">         <label for="locale"><?php echo __('Select Locale'); ?></label>         <select name="locale" id="locale">             <?php foreach ($locales as $locale): ?>                 <option value="<?php echo $locale['value']; ?>"><?php echo $locale['label']; ?></option>             <?php endforeach; ?>         </select>     </div> <?php endif; ?>

That’s it!

If you have any doubts about the solution, mention them in the Comments section below.

I would be happy to help.

Feel free to share the solution with Magento Community via social media.

Thank You.