dateFormatSetting

website/client/src/pages/settings/components/_saveCancelButtons.vue

@@ -9,7 +9,6 @@
     >
       {{ $t(primaryButtonLabel ?? 'save') }}
     </button>
-    <br>
 
     <a
       class="edit-link"

website/client/src/pages/settings/generalSettings.vue

@@ -43,21 +43,12 @@
 
       <table class="table">
         <language-setting />
-        <tr>
-          <td colspan="3">
-            Date Format TODO
-          </td>
-        </tr>
+        <date-format-setting />
         <tr>
           <td colspan="3">
             Day Start TODO
           </td>
         </tr>
-        <tr>
-          <td colspan="3">
-            Language TODO
-          </td>
-        </tr>
         <tr>
           <td colspan="3">
             Audio TODO
@@ -130,9 +121,11 @@ import ResetAccount from './inlineSettings/resetAccount';
 import DeleteAccount from './inlineSettings/deleteAccount';
 import { sharedInlineSettingStore } from './components/inlineSettingMixin';
 import LanguageSetting from './inlineSettings/languageSetting';
+import DateFormatSetting from '@/pages/settings/inlineSettings/dateFormatSetting';
 
 export default {
   components: {
+    DateFormatSetting,
     LanguageSetting,
     DeleteAccount,
     ResetAccount,

website/client/src/pages/settings/inlineSettings/dateFormatSetting.vue

@@ -0,0 +1,113 @@
+<template>
+  <fragment>
+    <tr
+      v-if="!modalVisible"
+    >
+      <td class="settings-label">
+        {{ $t("dateFormat") }}
+      </td>
+      <td class="settings-value">
+        {{ currentActiveFormat }}
+      </td>
+      <td class="settings-button">
+        <a
+          class="edit-link"
+          @click.prevent="openModal()"
+        >
+          {{ $t('edit') }}
+        </a>
+      </td>
+    </tr>
+    <tr
+      v-if="modalVisible"
+      class="expanded"
+    >
+      <td colspan="3">
+        <div
+          v-once
+          class="dialog-title"
+        >
+          {{ $t("dateFormat") }}
+        </div>
+        <div
+          v-once
+          class="dialog-disclaimer"
+        >
+          <span>{{ $t("dateFormatDisclaimer") }}</span>
+        </div>
+        <div class="input-area">
+          <div class="settings-label">
+            {{ $t("dateFormat") }}
+          </div>
+          <div class="form-group">
+            <select-list
+              :items="availableFormats"
+              :value="selectedFormat"
+              @select="changeFormat($event)"
+            />
+          </div>
+        </div>
+
+        <save-cancel-buttons
+          :disable-save="selectedFormat === currentActiveFormat"
+          @saveClicked="changeFormatAndClose()"
+          @cancelClicked="closeModal()"
+        />
+      </td>
+    </tr>
+  </fragment>
+</template>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+input {
+  margin-right: 2rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+</style>
+
+<script>
+import { mapState } from '@/libs/store';
+
+import SaveCancelButtons from '../components/_saveCancelButtons';
+import { InlineSettingMixin } from '../components/inlineSettingMixin';
+import SelectList from '@/components/ui/selectList';
+import { GenericSettingMixin } from '../components/genericSettingMixin';
+
+export default {
+  components: { SelectList, SaveCancelButtons },
+  mixins: [InlineSettingMixin, GenericSettingMixin],
+  data () {
+    return {
+      selectedFormat: '',
+      availableFormats: ['MM/dd/yyyy', 'dd/MM/yyyy', 'yyyy/MM/dd'],
+    };
+  },
+  computed: {
+    ...mapState({
+      user: 'user.data',
+    }),
+    currentActiveFormat () {
+      return this.user.preferences.dateFormat;
+    },
+  },
+  mounted () {
+    this.selectedFormat = this.currentActiveFormat;
+  },
+  methods: {
+    changeFormat (e) {
+      this.selectedFormat = e;
+    },
+    async changeFormatAndClose () {
+      this.user.preferences.dateFormat = this.selectedFormat;
+      await this.set('dateFormat');
+      this.closeModal();
+    },
+  },
+};
+</script>

website/common/locales/en/settings.json

@@ -204,6 +204,7 @@
     "changeEmailDisclaimer": "This is the email address that you use to log in to Habitica, as well as receive notifications.",
     "changeDisplayNameDisclaimer": "This is the name that will be displayed for your Avatar in Habitica.",
     "changePasswordDisclaimer": "Password must be 8 characters or more. We recommend a strong password that you're not using elsewhere.",
+    "dateFormatDisclaimer": "Adjust the date formatting across Habitica.",
     "verifyUsernameVeteranPet": "One of these Veteran Pets will be waiting for you after you've finished confirming!",
     "mentioning": "Mentioning",
     "suggestMyUsername": "Suggest my username",