aboutsummaryrefslogtreecommitdiff
path: root/packages/exchange-backoffice-ui/src/handlers/InputDate.tsx
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2023-05-15 11:45:23 -0300
committerSebastian <sebasjm@gmail.com>2023-05-15 11:45:23 -0300
commitf4f798b1b4bae3073b669a562fd2b3a7880dffc3 (patch)
tree90211e3188cf9d33f0fc468bca8f039cd89b313e /packages/exchange-backoffice-ui/src/handlers/InputDate.tsx
parentdb03383325063b9388c7ffa583485c3cff2b25eb (diff)
second form
Diffstat (limited to 'packages/exchange-backoffice-ui/src/handlers/InputDate.tsx')
-rw-r--r--packages/exchange-backoffice-ui/src/handlers/InputDate.tsx35
1 files changed, 35 insertions, 0 deletions
diff --git a/packages/exchange-backoffice-ui/src/handlers/InputDate.tsx b/packages/exchange-backoffice-ui/src/handlers/InputDate.tsx
new file mode 100644
index 000000000..00dd59996
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/handlers/InputDate.tsx
@@ -0,0 +1,35 @@
+import { AbsoluteTime } from "@gnu-taler/taler-util";
+import { InputLine, UIFormProps } from "./InputLine.js";
+import { CalendarIcon } from "@heroicons/react/24/outline";
+import { VNode, h } from "preact";
+import { format, parse } from "date-fns";
+
+export function InputDate(
+ props: { pattern?: string } & UIFormProps<AbsoluteTime>,
+): VNode {
+ const pattern = props.pattern ?? "dd/MM/yyyy";
+ return (
+ <InputLine<AbsoluteTime>
+ type="text"
+ after={{
+ type: "icon",
+ icon: <CalendarIcon class="h-6 w-6" />,
+ }}
+ converter={{
+ fromStringUI: (v) => {
+ if (!v) return { t_ms: "never" };
+ const t_ms = parse(v, pattern, Date.now()).getTime();
+ return { t_ms };
+ },
+ toStringUI: (v) => {
+ return !v || !v.t_ms
+ ? ""
+ : v.t_ms === "never"
+ ? "never"
+ : format(v.t_ms, pattern);
+ },
+ }}
+ {...props}
+ />
+ );
+}