all repos — piggy @ e82c0fc1e0a153fffa9de1c390f9d0cc4cee487d

Dead simple finance manager in Go, HTML and JS.

add flatpickr
Marco Andronaco andronacomarco@gmail.com
Mon, 07 Oct 2024 17:44:33 +0200
commit

e82c0fc1e0a153fffa9de1c390f9d0cc4cee487d

parent

4411580f68a99d7c111f707739f417c8df10e7cc

3 files changed, 21 insertions(+), 1 deletions(-)

jump to
M static/js/common.js → static/js/common.js 
@@ -19,6 +19,12 @@
 const currency = "€";
 const locale = "it-IT";
 
+const flatpickrOptions = {
+    enableTime: true,
+    time_24hr: true,
+    dateFormat: "Z",
+};
+
 // Cell formatters
 function formatValue(v) {
     if (v === undefined) return 0;

@@ -74,6 +80,18 @@ input.type = "checkbox";
     if (value) input.setAttribute("checked", "");
     l.appendChild(input);
     l.innerHTML += label;
+    return l;
+}
+
+function newInputDate(label, value, name) {
+    const l = document.createElement("label");
+    const input = document.createElement("input");
+    input.className = name;
+    input.placeholder = label;
+    input.value = value ?? "";
+    flatpickr(input, flatpickrOptions);
+    l.innerHTML += label + "<br />";
+    l.appendChild(input);
     return l;
 }
M static/js/records-edit.js → static/js/records-edit.js 
@@ -125,7 +125,7 @@ // subentry.won
     div.appendChild(newInputCheckbox("Won", subEntry?.won, "subentry-won"));
     
     // subentry.date
-    div.appendChild(newInputText("Date", subEntry?.date ?? new Date().toISOString(), "subentry-date"));
+    div.appendChild(newInputDate("Date", subEntry?.date ?? new Date().toISOString(), "subentry-date"));
 
     return div;
 }
M static/records/edit/index.html → static/records/edit/index.html 
@@ -5,6 +5,7 @@ <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Piggy - Records</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
     <link rel="stylesheet" href="/css/styles.css">
 </head>
 

@@ -23,6 +24,7 @@ <button id="save">Save</button>
             <button id="delete">Delete</button>
         </div>
     </main>
+    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
     <script src="/js/common.js"></script>
     <script src="/js/records-edit.js" defer></script>
 </body>