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

More time input stuff

Browse Source
This commit is contained in:
jude 2023-11-12 19:25:37 +00:00
parent 71e7857e9a
commit 3d70be22e3
2 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Reminder/IntervalSelector.tsx
View File

@ -65,7 +65,10 @@ export const IntervalSelector = ({
placeholder=""
value={months || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setMonths(parseInt(ev.currentTarget.value));
}
}}
></input>{" "}
<span class="half-rem"></span> months, <span class="half-rem"></span>
@ -81,7 +84,10 @@ export const IntervalSelector = ({
placeholder=""
value={days || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setDays(parseInt(ev.currentTarget.value));
}
}}
></input>{" "}
<span class="half-rem"></span> days, <span class="half-rem"></span>
@ -99,7 +105,10 @@ export const IntervalSelector = ({
placeholder="HH"
value={hours || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setHours(parseInt(ev.currentTarget.value));
}
}}
></input>
:
@ -115,7 +124,10 @@ export const IntervalSelector = ({
placeholder="MM"
value={minutes || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setMinutes(parseInt(ev.currentTarget.value));
}
}}
></input>
:
@ -131,7 +143,10 @@ export const IntervalSelector = ({
placeholder="SS"
value={seconds || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setSeconds(parseInt(ev.currentTarget.value));
}
}}
></input>
</label>

7
src/components/Reminder/TimeInput.tsx
View File

@ -1,12 +1,10 @@
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(() => {
@ -23,7 +21,7 @@ export const TimeInput = ({ defaultValue, onInput }) => {
fontSize: "16px",
}}
value={time && time.toFormat(format)}
onInput={(ev) => {
onBlur={(ev) => {
const dt = DateTime.fromFormat(ev.currentTarget.value, format);
if (dt.isValid) {
setTime(dt);
@ -49,8 +47,11 @@ export const TimeInput = ({ defaultValue, onInput }) => {
</div>
<input
style={{
position: "absolute",
left: 0,
visibility: "hidden",
}}
class={"input"}
type="datetime-local"
step="1"
name="time"