2 files changed, 36 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/profiles/index.js b/app/assets/javascripts/pages/profiles/index.js
index 6afb3636998..91b20a05196 100644
--- a/app/assets/javascripts/pages/profiles/index.js
+++ b/app/assets/javascripts/pages/profiles/index.js
@@ -3,6 +3,7 @@ import '~/profile/gl_crop';
 import Profile from '~/profile/profile';
 import initSearchSettings from '~/search_settings';
 import initPasswordPrompt from './password_prompt';
+import { initTimezoneDropdown } from './init_timezone_dropdown';
 
 // eslint-disable-next-line func-names
 $(document).on('input.ssh_key', '#key_key', function () {
@@ -21,3 +22,4 @@ new Profile(); // eslint-disable-line no-new
 
 initSearchSettings();
 initPasswordPrompt();
+initTimezoneDropdown();
diff --git a/app/assets/javascripts/pages/profiles/init_timezone_dropdown.js b/app/assets/javascripts/pages/profiles/init_timezone_dropdown.js
new file mode 100644
index 00000000000..80b911493a8
--- /dev/null
+++ b/app/assets/javascripts/pages/profiles/init_timezone_dropdown.js
@@ -0,0 +1,34 @@
+import Vue from 'vue';
+import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown/timezone_dropdown.vue';
+
+export const initTimezoneDropdown = () => {
+  const el = document.querySelector('.js-timezone-dropdown');
+
+  if (!el) {
+    return null;
+  }
+
+  const { timezoneData, initialValue } = el.dataset;
+  const timezones = JSON.parse(timezoneData);
+
+  const timezoneDropdown = new Vue({
+    el,
+    data() {
+      return {
+        value: initialValue,
+      };
+    },
+    render(h) {
+      return h(TimezoneDropdown, {
+        props: {
+          value: this.value,
+          timezoneData: timezones,
+          name: 'user[timezone]',
+        },
+        class: 'gl-md-form-input-lg',
+      });
+    },
+  });
+
+  return timezoneDropdown;
+};