Add caption to timezones dropdown (#1643)

instedd · Feb 6, 2020 · ea28608 · ea28608
1 parent 4b18e92
commit ea28608
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/locales/template/translation.json b/locales/template/translation.json
@@ -422,6 +422,7 @@
   "The system only accepts CSV files": "",
   "This will finalize the survey execution": "",
   "Thu": "",
+  "Time at selected timezone: {{time}}": "",
   "Timezone": "",
   "Title": "",
   "Title must not be blank": "",

diff --git a/web/static/js/components/timezones/TimezoneAutocomplete.jsx b/web/static/js/components/timezones/TimezoneAutocomplete.jsx
@@ -13,7 +13,8 @@ class TimezoneAutocomplete extends Component {
     dispatch: PropTypes.func.isRequired,
     selectedTz: PropTypes.string,
     timezones: PropTypes.object,
-    readOnly: PropTypes.bool
+    readOnly: PropTypes.bool,
+    i18n: PropTypes.object
   }
 
   constructor(props) {
@@ -66,8 +67,14 @@ class TimezoneAutocomplete extends Component {
     dispatch(actions.setTimezone(timezone.id))
   }
 
+  getTimeForTimezone(timezone, locale) {
+    var date = new Date()
+    return date.toLocaleString(locale, {timeZone: timezone, hour12: false, hour: '2-digit', minute: '2-digit', weekday: 'long'})
+  }
+
   render() {
-    const { timezones, t, readOnly } = this.props
+    const { timezones, t, readOnly, i18n } = this.props
+    const currentLanguage = i18n.language
 
     if (!timezones || !timezones.items) {
       return (
@@ -89,6 +96,7 @@ class TimezoneAutocomplete extends Component {
             className='timezone-dropdown'
             ref='autocomplete'
           />
+          <span className='small-text-bellow'>{t('Time at selected timezone: {{time}}', {time: this.getTimeForTimezone(this.props.selectedTz, currentLanguage)})}</span>
         </div>
       )
     }