diff --git a/package-lock.json b/package-lock.json
index 1994503..617ef79 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,6 @@
"": {
"name": "example",
"dependencies": {
- "air-datepicker": "^3.4.0",
"axios": "^1.5.1",
"bulma": "^0.9.4",
"luxon": "^3.4.3",
@@ -22,6 +21,7 @@
"eslint": "^8.50.0",
"eslint-config-preact": "^1.3.0",
"prettier": "^3.0.3",
+ "react-datepicker": "^4.21.0",
"typescript": "^5.2.2",
"vite": "^4.3.2"
}
@@ -1047,6 +1047,16 @@
"node": ">= 8"
}
},
+ "node_modules/@popperjs/core": {
+ "version": "2.11.8",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+ "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+ "dev": true,
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/popperjs"
+ }
+ },
"node_modules/@preact/preset-vite": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@preact/preset-vite/-/preset-vite-2.6.0.tgz",
@@ -1370,11 +1380,6 @@
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
}
},
- "node_modules/air-datepicker": {
- "version": "3.4.0",
- "resolved": "https://registry.npmjs.org/air-datepicker/-/air-datepicker-3.4.0.tgz",
- "integrity": "sha512-MFr+2QYdHgrbd6Ah32hxoSCsmNJdrhYSkhr6hhefLpJBtsvX7zdYSvizsCJg15B2000NrEXep8UCYOsWy39iiw=="
- },
"node_modules/ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -1726,6 +1731,12 @@
"node": ">=4"
}
},
+ "node_modules/classnames": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+ "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+ "dev": true
+ },
"node_modules/color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1777,6 +1788,22 @@
"node": ">= 8"
}
},
+ "node_modules/date-fns": {
+ "version": "2.30.0",
+ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+ "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+ "dev": true,
+ "dependencies": {
+ "@babel/runtime": "^7.21.0"
+ },
+ "engines": {
+ "node": ">=0.11"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/date-fns"
+ }
+ },
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -3920,6 +3947,24 @@
"react-dom": ">=16.8.0"
}
},
+ "node_modules/react-datepicker": {
+ "version": "4.21.0",
+ "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.21.0.tgz",
+ "integrity": "sha512-z0DtuRrKMz9i7dcTusW29VacbM9pn08g1yw0cG+Y5GpodJDxSWv7zUMxl3IwKN9Ap/AMphiepvmT5P+iNCgEiA==",
+ "dev": true,
+ "dependencies": {
+ "@popperjs/core": "^2.11.8",
+ "classnames": "^2.2.6",
+ "date-fns": "^2.30.0",
+ "prop-types": "^15.7.2",
+ "react-onclickoutside": "^6.13.0",
+ "react-popper": "^2.3.0"
+ },
+ "peerDependencies": {
+ "react": "^16.9.0 || ^17 || ^18",
+ "react-dom": "^16.9.0 || ^17 || ^18"
+ }
+ },
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -3933,12 +3978,47 @@
"react": "^18.2.0"
}
},
+ "node_modules/react-fast-compare": {
+ "version": "3.2.2",
+ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+ "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+ "dev": true
+ },
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
},
+ "node_modules/react-onclickoutside": {
+ "version": "6.13.0",
+ "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
+ "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
+ "dev": true,
+ "funding": {
+ "type": "individual",
+ "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
+ },
+ "peerDependencies": {
+ "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
+ "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
+ }
+ },
+ "node_modules/react-popper": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+ "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+ "dev": true,
+ "dependencies": {
+ "react-fast-compare": "^3.0.1",
+ "warning": "^4.0.2"
+ },
+ "peerDependencies": {
+ "@popperjs/core": "^2.0.0",
+ "react": "^16.8.0 || ^17 || ^18",
+ "react-dom": "^16.8.0 || ^17 || ^18"
+ }
+ },
"node_modules/react-query": {
"version": "3.39.3",
"resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
@@ -4626,6 +4706,15 @@
}
}
},
+ "node_modules/warning": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+ "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+ "dev": true,
+ "dependencies": {
+ "loose-envify": "^1.0.0"
+ }
+ },
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 9c10fd6..3ba5b91 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,6 @@
"preview": "vite preview"
},
"dependencies": {
- "air-datepicker": "^3.4.0",
"axios": "^1.5.1",
"bulma": "^0.9.4",
"luxon": "^3.4.3",
@@ -24,6 +23,7 @@
"eslint": "^8.50.0",
"eslint-config-preact": "^1.3.0",
"prettier": "^3.0.3",
+ "react-datepicker": "^4.21.0",
"typescript": "^5.2.2",
"vite": "^4.3.2"
}
diff --git a/src/components/Reminder/Settings.tsx b/src/components/Reminder/Settings.tsx
index 0321e4b..f919236 100644
--- a/src/components/Reminder/Settings.tsx
+++ b/src/components/Reminder/Settings.tsx
@@ -7,6 +7,7 @@ import { useReminder } from "./ReminderContext";
import { Attachment } from "./Attachment";
import { TTS } from "./TTS";
import { useTimezone } from "../App/TimezoneProvider";
+import { TimeInput } from "./TimeInput";
export const Settings = () => {
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
@@ -41,21 +42,15 @@ export const Settings = () => {
@@ -102,28 +97,15 @@ export const Settings = () => {
diff --git a/src/components/Reminder/TimeInput.tsx b/src/components/Reminder/TimeInput.tsx
new file mode 100644
index 0000000..fd90529
--- /dev/null
+++ b/src/components/Reminder/TimeInput.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import { DateTime } from "luxon";
+import { useTimezone } from "../App/TimezoneProvider";
+
+export const TimeInput = ({ defaultValue, onInput }) => {
+ const format = "yyyy-LL-dd, HH:mm:ss";
+ const ref = useRef(null);
+
+ const [zone] = useTimezone();
+ const [time, setTime] = useState(defaultValue);
+
+ useEffect(() => {
+ onInput(time);
+ }, [time]);
+
+ return (
+ <>
+
+ {
+ const dt = DateTime.fromFormat(ev.currentTarget.value, format);
+ if (dt.isValid) {
+ setTime(dt);
+ }
+ }}
+ >
+
+
+ {
+ setTime(DateTime.fromISO(ev.currentTarget.value));
+ }}
+ >
+
+ );
+};