diff --git a/web/src/components/TransactionEditRow.vue b/web/src/components/TransactionEditRow.vue
index cb6aeac..1a58c63 100644
--- a/web/src/components/TransactionEditRow.vue
+++ b/web/src/components/TransactionEditRow.vue
@@ -12,7 +12,7 @@ const accountStore = useAccountStore();
 const Transaction = accountStore.Transactions.get(props.transactionid)!;
 
 const payload = computed(() => JSON.stringify({
-    date: Transaction.Date,
+    date: Transaction.Date.toISOString().split("T")[0],
     payee: {
         Name: Transaction.Payee,
         ID: Transaction.PayeeID,
diff --git a/web/src/components/TransactionInputRow.vue b/web/src/components/TransactionInputRow.vue
index 094ade8..36dd291 100644
--- a/web/src/components/TransactionInputRow.vue
+++ b/web/src/components/TransactionInputRow.vue
@@ -2,6 +2,7 @@
 import { computed, ref } from "vue";
 import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
 import { Transaction, useAccountStore } from '../stores/budget-account'
+import DateInput from "./DateInput.vue";
 
 const props = defineProps<{
     budgetid: string
@@ -26,7 +27,7 @@ const TX = ref<Transaction>({
 const payload = computed(() => JSON.stringify({
     budgetId: props.budgetid,
     accountId: props.accountid,
-    date: TX.value.Date,
+    date: TX.value.Date.toISOString().split("T")[0],
     payee: {
         Name: TX.value.Payee,
         ID: TX.value.PayeeID,
@@ -47,7 +48,7 @@ function saveTransaction(e: MouseEvent) {
 <template>
     <tr>
         <td style="width: 90px;" class="text-sm">
-            <input class="border-b-2 border-black" type="date" v-model="TX.Date" />
+            <DateInput class="border-b-2 border-black" v-model="TX.Date" />
         </td>
         <td style="max-width: 150px;">
             <Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" type="payees" />