jude/reminder-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Custom time picker

Browse Source
This commit is contained in:
jude
2023-11-12 18:10:03 +00:00
parent d068782596
commit 71e7857e9a
4 changed files with 172 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Reminder/Settings.tsx
View File

@ -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 = () => {
<div class="control">
<label class="label collapses">
Time*
<input
class="input"
type="datetime-local"
step="1"
name="time"
value={reminder.utc_time
.setZone(timezone)
.toFormat("yyyy-LL-dd'T'HH:mm:ss")}
onInput={(ev) => {
<TimeInput
defaultValue={reminder.utc_time}
onInput={(time: DateTime) => {
setReminder((reminder) => ({
...reminder,
utc_time: DateTime.fromISO(ev.currentTarget.value).toUTC(),
utc_time: time,
}));
}}
></input>
/>
</label>
</div>
</div>
@ -102,28 +97,15 @@ export const Settings = () => {
<div class="control">
<label class="label">
Expiration
<input
class="input"
type="datetime-local"
step="1"
name="expiration"
value={
reminder.expires !== null &&
reminder.expires
.setZone(timezone)
.toFormat("yyyy-LL-dd'T'HH:mm:ss")
}
onInput={(ev) => {
<TimeInput
defaultValue={reminder.expires}
onInput={(time: DateTime) => {
setReminder((reminder) => ({
...reminder,
expires: ev.currentTarget.value
? DateTime.fromISO(
ev.currentTarget.value,
).toUTC()
: null,
expires: time,
}));
}}
></input>
/>
</label>
</div>
</div>

65
src/components/Reminder/TimeInput.tsx Normal file
View File

@ -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 (
<>
<div class={"input"}>
<input
placeholder={"YYYY-MM-DD, hh:mm:ss"}
style={{
border: "none",
fontSize: "16px",
}}
value={time && time.toFormat(format)}
onInput={(ev) => {
const dt = DateTime.fromFormat(ev.currentTarget.value, format);
if (dt.isValid) {
setTime(dt);
}
}}
></input>
<button
style={{
background: "none",
border: "none",
padding: "1px",
marginRight: "-3px",
}}
onClick={() => {
ref.current.showPicker();
}}
>
<span class="is-sr-only">Clear interval</span>
<span class="icon">
<i class="fas fa-calendar"></i>
</span>
</button>
</div>
<input
style={{
visibility: "hidden",
}}
type="datetime-local"
step="1"
name="time"
value={time && time.toFormat("yyyy-LL-dd'T'HH:mm:ss")}
ref={ref}
onInput={(ev) => {
setTime(DateTime.fromISO(ev.currentTarget.value));
}}
></input>
</>
);
};