web/src/components/TransactionInputRow.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 }>()
 
 const TX = ref<Transaction>({
-    Date: new Date().toISOString().substring(0, 10),
+    Date: new Date(),
     Memo: "",
     Amount: 0,
     Payee: "",

web/src/components/TransactionRow.vue

@@ -4,6 +4,7 @@ import { useBudgetsStore } from "../stores/budget";
 import { Transaction } from "../stores/budget-account";
 import Currency from "./Currency.vue";
 import TransactionEditRow from "./TransactionEditRow.vue";
+import { formatDate } from "../date";
 
 const props = defineProps<{
     transaction: Transaction,
@@ -19,7 +20,7 @@ const CurrentBudgetID = computed(()=> useBudgetsStore().CurrentBudgetID);
     <tr v-if="!edit" class="{{new Date(transaction.Date) > new Date() ? 'future' : ''}}"
         :class="[index % 6 < 3 ? 'bg-gray-300' : 'bg-gray-100']">
         <!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
-        <td>{{ transaction.Date.substring(0, 10) }}</td>
+        <td>{{ formatDate(transaction.Date) }}</td>
         <td>{{ transaction.TransferAccount ? "Transfer : " + transaction.TransferAccount : transaction.Payee }}</td>
         <td>
             {{ transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : "" }}

web/src/date.ts

@@ -0,0 +1,7 @@
+export function formatDate(date: Date): string {
+    return date.toLocaleDateString(undefined, { // you can use undefined as first argument
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+    });
+}