Implement custom date input

web/src/components/DateInput.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+const props = defineProps(["modelValue"]);
+const emit = defineEmits(['update:modelValue']);
+
+function dateToYYYYMMDD(d: Date) : string {
+  // alternative implementations in https://stackoverflow.com/q/23593052/1850609
+  //return new Date(d.getTime() - (d.getTimezoneOffset() * 60 * 1000)).toISOString().split('T')[0];
+  return d.toISOString().split('T')[0];
+}
+
+function updateValue(event: Event) {
+  const target = event.target as HTMLInputElement;
+  emit('update:modelValue', target.valueAsDate);
+}
+function selectAll(event: FocusEvent) {
+  // Workaround for Safari bug
+  // http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
+  setTimeout(function () {
+    const target = event.target as HTMLInputElement;
+    target.select()
+  }, 0)
+}
+</script>
+
+<template>
+  <input
+    type="date"
+    ref="input"
+    v-bind:value="dateToYYYYMMDD(modelValue)"
+    @input="updateValue"
+    @focus="selectAll"
+  />
+</template>

web/src/components/TransactionEditRow.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import Autocomplete from './Autocomplete.vue'
 import { useAccountStore } from '../stores/budget-account'
+import DateInput from "./DateInput.vue";
 
 const props = defineProps<{
     transactionid: string
@@ -31,7 +32,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="Transaction.Date" />
+            <DateInput class="border-b-2 border-black" v-model="Transaction.Date" />
         </td>
         <td style="max-width: 150px;">
             <Autocomplete v-model:text="Transaction.Payee" v-model:id="Transaction.PayeeID" type="payees" />

web/src/stores/budget-account.ts

@@ -14,7 +14,7 @@ interface State {
 
 export interface Transaction {
     ID: string,
-    Date: string,
+    Date: Date,
     TransferAccount: string,
     CategoryGroup: string,
     Category: string,
@@ -127,6 +127,7 @@ export const useAccountStore = defineStore("budget/account", {
             const response = await result.json();
             account.Transactions = [];
             for (const transaction of response.Transactions) {
+                transaction.Date = new Date(transaction.Date);
                 this.Transactions.set(transaction.ID, transaction);
                 account.Transactions.push(transaction.ID);
             }