{"id":1576,"date":"2021-02-08T15:51:38","date_gmt":"2021-02-08T15:51:38","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/add-timezone-locale-dropdown-in-custom-form-in-frontend-in-magento-2\/"},"modified":"2025-07-21T12:11:59","modified_gmt":"2025-07-21T06:41:59","slug":"add-timezone-locale-dropdown-in-custom-form-in-frontend-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-timezone-locale-dropdown-in-custom-form-in-frontend-in-magento-2\/","title":{"rendered":"How to Add Timezone & Locale Dropdown in Custom Form in Frontend in Magento 2"},"content":{"rendered":"\n

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

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\u2019s 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.<\/p>\n\n\n\n

In such scenarios, you may add timezone & locale dropdown in custom form in frontend in Magento 2<\/strong><\/em> as shown below:<\/p>\n\n\n\n

The timezone and locale in a custom form<\/strong><\/h2>\n\n\n
\n
\"Inquiry<\/figure>\n<\/div>\n\n
\n
\"Locale\"<\/figure>\n<\/div>\n\n\n

Use the below code to get the customers\u2019 time zone and locale data from the frontend as shown in the above figure.<\/p>\n\n\n\n

Steps to Add Timezone & Locale Dropdown in Custom Form in Frontend in Magento 2<\/h2>\n\n\n\n

1. Add the below code in your block<\/strong> file.<\/p>\n\n\n\n

<?php\n\nnamespace Meetanshi\\Module\\Block;\n\nuse Magento\\Framework\\Locale\\ListsInterface;\nuse Magento\\Framework\\View\\Element\\Template;\n\nclass CustomForm extends Template\n{\n    protected $listInterface;\n\n    public function __construct(\n        Template\\Context $context,\n        ListsInterface $listInterface,\n        array $data = []\n    )\n    {\n        $this->listInterface = $listInterface;\n        parent::__construct($context, $data);\n    }\n\n    public function getTimeZoneList()\n    {\n        $timezonesList = $this->listInterface->getOptionTimezones();\n        return $timezonesList;\n    }\n\n    public function getLocaleList()\n    {\n        $localeList = $this->listInterface->getOptionLocales();\n        return $localeList;\n    }\n}<\/pre>\n\n\n\n
2. Add the below code in your phtml<\/strong> file.<\/p>\n\n\n\n
<?php\n\/** @var  \\Meetanshi\\Module\\Block\\CustomForm $block *\/\n$timezones = $block->getTimeZoneList();\n$locales = $block->getLocaleList();\n?>\n<?php if (sizeof($timezones) > 0): ?>\n    <div class=\"timezone\">\n        <label for=\"timezone\"><?php echo __('Select Timezone'); ?><\/label>\n        <select name=\"timezone\" id=\"timezone\">\n            <?php foreach ($timezones as $timezone): ?>\n                <option value=\"<?php echo $timezone['value']; ?>\"><?php echo $timezone['label']; ?><\/option>\n            <?php endforeach; ?>\n        <\/select>\n    <\/div>\n<?php endif; ?>\n<?php if (sizeof($locales) > 0): ?>\n    <div class=\"locale\">\n        <label for=\"locale\"><?php echo __('Select Locale'); ?><\/label>\n        <select name=\"locale\" id=\"locale\">\n            <?php foreach ($locales as $locale): ?>\n                <option value=\"<?php echo $locale['value']; ?>\"><?php echo $locale['label']; ?><\/option>\n            <?php endforeach; ?>\n        <\/select>\n    <\/div>\n<?php endif; ?><\/pre>\n\n\n\n
That\u2019s it!<\/p>\n\n\n\n
Feel free to share the solution with Magento Community via social media.<\/p>\n\n\n\n
Thank You.<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1576","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1576"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1576\/revisions"}],"predecessor-version":[{"id":18700,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1576\/revisions\/18700"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}