Added an option to change date format

client/pages/config/index.vue

@@ -156,6 +156,15 @@
           </p>
         </ui-tooltip>
       </div>
+
+      <div clas="flex items-center py-2">
+          <ui-dropdown v-model="newServerSettings.dateFormat" :items="dateFormats" small @input="(val) => updateSettingsKey('dateFormat', val)" style="width: 10em; display:inline-flex" />
+            <p class="pl-4 text-lg" style="display:inline-flex; vertical-align: top;">
+              Date Format
+              <span class="material-icons icon-text">info_outlined</span>
+            </p>
+      </div>
+
     </div>
 
     <div class="h-0.5 bg-primary bg-opacity-30 w-full" />
@@ -282,6 +291,9 @@ export default {
       set(val) {
         this.$store.commit('setExperimentalFeatures', val)
       }
+    },
+    dateFormats() {
+      return this.$store.state.globals.dateFormats
     }
   },
   methods: {

client/pages/item/_id/index.vue

@@ -118,9 +118,9 @@
           <!-- Progress -->
           <div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 mt-4 bg-primary text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0" :class="resettingProgress ? 'opacity-25' : ''">
             <p v-if="progressPercent < 1" class="leading-6">Your Progress: {{ Math.round(progressPercent * 100) }}%</p>
-            <p v-else class="text-xs">Finished {{ $formatDate(userProgressFinishedAt, 'MM/dd/yyyy') }}</p>
+            <p v-else class="text-xs">Finished {{ $formatDate(userProgressFinishedAt, dateFormat) }}</p>
             <p v-if="progressPercent < 1" class="text-gray-200 text-xs">{{ $elapsedPretty(userTimeRemaining) }} remaining</p>
-            <p class="text-gray-400 text-xs pt-1">Started {{ $formatDate(userProgressStartedAt, 'MM/dd/yyyy') }}</p>
+            <p class="text-gray-400 text-xs pt-1">Started {{ $formatDate(userProgressStartedAt, dateFormat) }}</p>
 
             <div v-if="!resettingProgress" class="absolute -top-1.5 -right-1.5 p-1 w-5 h-5 rounded-full bg-bg hover:bg-error border border-primary flex items-center justify-center cursor-pointer" @click.stop="clearProgressClick">
               <span class="material-icons text-sm">close</span>
@@ -226,6 +226,9 @@ export default {
     }
   },
   computed: {
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
     showExperimentalFeatures() {
       return this.$store.state.showExperimentalFeatures
     },

client/plugins/init.client.js

@@ -169,7 +169,7 @@ Vue.prototype.$sanitizeSlug = (str) => {
     str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i))
   }
 
-  str = str.replace('.', '-') // replace a dot by a dash 
+  str = str.replace('.', '-') // replace a dot by a dash
     .replace(/[^a-z0-9 -_]/g, '') // remove invalid chars
     .replace(/\s+/g, '-') // collapse whitespace and replace by a dash
     .replace(/-+/g, '-') // collapse dashes

client/store/globals.js

@@ -1,4 +1,3 @@
-
 export const state = () => ({
   isMobile: false,
   isMobileLandscape: false,
@@ -12,7 +11,21 @@ export const state = () => ({
   selectedCollection: null,
   selectedAuthor: null,
   isCasting: false, // Actively casting
-  isChromecastInitialized: false // Script loaded
+  isChromecastInitialized: false, // Script loaded
+  dateFormats: [
+    {
+      text: 'MM/DD/YYYY',
+      value: 'MM/dd/yyyy'
+    },
+    {
+      text: 'DD/MM/YYYY',
+      value: 'dd/MM/yyyy'
+    },
+    {
+      text: 'YYYY-MM-DD',
+      value: 'yyyy-MM-dd'
+    }
+  ]
 })
 
 export const getters = {

server/objects/settings/ServerSettings.js

@@ -12,7 +12,7 @@ class ServerSettings {
     this.scannerPreferAudioMetadata = false
     this.scannerPreferOpfMetadata = false
     this.scannerPreferMatchedMetadata = false
-    this.scannerDisableWatcher = false 
+    this.scannerDisableWatcher = false
     this.scannerPreferOverdriveMediaMarker = false
 
     // Metadata - choose to store inside users library item folder
@@ -48,6 +48,7 @@ class ServerSettings {
     // Misc Flags
     this.chromecastEnabled = false
     this.enableEReader = false
+    this.dateFormat="MM/dd/yyyy"
 
     this.logLevel = Logger.logLevel
 
@@ -95,6 +96,7 @@ class ServerSettings {
     this.sortingPrefixes = settings.sortingPrefixes || ['the', 'a']
     this.chromecastEnabled = !!settings.chromecastEnabled
     this.enableEReader = !!settings.enableEReader
+    this.dateFormat = settings.dateFormat
     this.logLevel = settings.logLevel || Logger.logLevel
     this.version = settings.version || null
 
@@ -130,6 +132,7 @@ class ServerSettings {
       sortingPrefixes: [...this.sortingPrefixes],
       chromecastEnabled: this.chromecastEnabled,
       enableEReader: this.enableEReader,
+      dateFormat: this.dateFormat,
       logLevel: this.logLevel,
       version: this.version
     }