diff --git a/vue3/src/components/model_editors/MealPlanEditor.vue b/vue3/src/components/model_editors/MealPlanEditor.vue
index 68e0d7799..ca3f36a83 100644
--- a/vue3/src/components/model_editors/MealPlanEditor.vue
+++ b/vue3/src/components/model_editors/MealPlanEditor.vue
@@ -28,7 +28,6 @@
                                 <v-date-input
                                     v-model="dateRangeValue"
                                     @update:modelValue="updateDate()"
-                                    :display-format="(date: Date) => DateTime.fromJSDate(date).toLocaleString()"
                                     :first-day-of-week="useUserPreferenceStore().deviceSettings.mealplan_startingDayOfWeek"
                                     :show-week="useUserPreferenceStore().deviceSettings.mealplan_displayWeekNumbers"
                                     :label="$t('Date')"
diff --git a/vue3/src/vuetify.ts b/vue3/src/vuetify.ts
index ee040aeac..3b4b24725 100644
--- a/vue3/src/vuetify.ts
+++ b/vue3/src/vuetify.ts
@@ -4,6 +4,7 @@ import {aliases, fa} from 'vuetify/iconsets/fa'
 
 // Composables
 import {createVuetify} from 'vuetify'
+import {DateTime} from "luxon";
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
@@ -19,6 +20,10 @@ export default createVuetify({
         // limiting max width of base container so UIs dont become too wide
         VContainer: {
             maxWidth: '1400px'
+        },
+        // always localize the date display of DateInputs
+        VDateInput: {
+            displayFormat : (date: Date) => DateTime.fromJSDate(date).toLocaleString()
         }
     },
     theme: {