5 files changed, 38 insertions, 14 deletions

diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index 643b38af5..ebbe319b5 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -4,6 +4,7 @@
 var PostStore = require('../stores/post_store.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
+var PreferenceStore = require('../stores/preference_store.jsx');
 var UserProfile = require('./user_profile.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 var Post = require('./post.jsx');
@@ -105,6 +106,7 @@ export default class PostList extends React.Component {
         PostStore.clearUnseenDeletedPosts(this.props.channelId);
         PostStore.addChangeListener(this.onChange);
         UserStore.addStatusesChangeListener(this.onTimeChange);
+        PreferenceStore.addChangeListener(this.onTimeChange);
         SocketStore.addChangeListener(this.onSocketChange);
 
         const postHolder = $(React.findDOMNode(this.refs.postlist));
@@ -156,6 +158,7 @@ export default class PostList extends React.Component {
         PostStore.removeChangeListener(this.onChange);
         UserStore.removeStatusesChangeListener(this.onTimeChange);
         SocketStore.removeChangeListener(this.onSocketChange);
+        PreferenceStore.removeChangeListener(this.onTimeChange);
         $('body').off('click.userpopover');
         $(window).off('resize');
         var postHolder = $(React.findDOMNode(this.refs.postlist));
diff --git a/web/react/components/user_settings/user_settings.jsx b/web/react/components/user_settings/user_settings.jsx
index 5ce9b6330..15bf961d6 100644
--- a/web/react/components/user_settings/user_settings.jsx
+++ b/web/react/components/user_settings/user_settings.jsx
@@ -9,6 +9,7 @@ var GeneralTab = require('./user_settings_general.jsx');
 var AppearanceTab = require('./user_settings_appearance.jsx');
 var DeveloperTab = require('./user_settings_developer.jsx');
 var IntegrationsTab = require('./user_settings_integrations.jsx');
+var DisplayTab = require('./user_settings_display.jsx');
 
 export default class UserSettings extends React.Component {
     constructor(props) {
@@ -98,6 +99,17 @@ export default class UserSettings extends React.Component {
                     />
                 </div>
             );
+        } else if (this.props.activeTab === 'display') {
+            return (
+                <div>
+                    <DisplayTab
+                        user={this.state.user}
+                        activeSection={this.props.activeSection}
+                        updateSection={this.props.updateSection}
+                        updateTab={this.props.updateTab}
+                    />
+                </div>
+            );
         }
 
         return <div/>;
diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx
index 19b97fc85..692fb26ee 100644
--- a/web/react/components/user_settings/user_settings_modal.jsx
+++ b/web/react/components/user_settings/user_settings_modal.jsx
@@ -41,6 +41,7 @@ export default class UserSettingsModal extends React.Component {
         if (global.window.config.EnableIncomingWebhooks === 'true') {
             tabs.push({name: 'integrations', uiName: 'Integrations', icon: 'glyphicon glyphicon-transfer'});
         }
+        tabs.push({name: 'display', uiName: 'Display', icon: 'glyphicon glyphicon-eye-open'});
 
         return (
             <div
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index cee2ec114..3b7f16369 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -288,6 +288,7 @@ module.exports = {
         }
     ],
     Preferences: {
-        CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show'
+        CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show',
+        CATEGORY_DISPLAY_SETTINGS: 'display_settings'
     }
 };
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 8f697a9c5..a5057b5ca 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -4,6 +4,7 @@
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
+var PreferenceStore = require('../stores/preference_store.jsx');
 var TeamStore = require('../stores/team_store.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
@@ -164,23 +165,29 @@ export function displayDate(ticks) {
 }
 
 export function displayTime(ticks) {
-    var d = new Date(ticks);
-    var hours = d.getHours();
-    var minutes = d.getMinutes();
-
-    var ampm = 'AM';
-    if (hours >= 12) {
-        ampm = 'PM';
-    }
+    const d = new Date(ticks);
+    let hours = d.getHours();
+    let minutes = d.getMinutes();
+    let ampm = '';
 
-    hours = hours % 12;
-    if (!hours) {
-        hours = '12';
-    }
     if (minutes <= 9) {
         minutes = '0' + minutes;
     }
-    return hours + ':' + minutes + ' ' + ampm;
+
+    const useMilitaryTime = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', {value: 'false'}).value;
+    if(useMilitaryTime === 'false') {
+        ampm = ' AM';
+        if (hours >= 12) {
+            ampm = ' PM';
+        }
+
+        hours = hours % 12;
+        if (!hours) {
+            hours = '12';
+        }
+    }
+
+    return hours + ':' + minutes + ampm;
 }
 
 export function displayDateTime(ticks) {