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

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

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

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

@ -1,12 +1,10 @@
import { useEffect, useRef, useState } from "preact/hooks"; import { useEffect, useRef, useState } from "preact/hooks";
import { DateTime } from "luxon"; import { DateTime } from "luxon";
import { useTimezone } from "../App/TimezoneProvider";
export const TimeInput = ({ defaultValue, onInput }) => { export const TimeInput = ({ defaultValue, onInput }) => {
const format = "yyyy-LL-dd, HH:mm:ss"; const format = "yyyy-LL-dd, HH:mm:ss";
const ref = useRef(null); const ref = useRef(null);
const [zone] = useTimezone();
const [time, setTime] = useState(defaultValue); const [time, setTime] = useState(defaultValue);
useEffect(() => { useEffect(() => {
@ -23,7 +21,7 @@ export const TimeInput = ({ defaultValue, onInput }) => {
fontSize: "16px", fontSize: "16px",
}} }}
value={time && time.toFormat(format)} value={time && time.toFormat(format)}
onInput={(ev) => { onBlur={(ev) => {
const dt = DateTime.fromFormat(ev.currentTarget.value, format); const dt = DateTime.fromFormat(ev.currentTarget.value, format);
if (dt.isValid) { if (dt.isValid) {
setTime(dt); setTime(dt);
@ -49,8 +47,11 @@ export const TimeInput = ({ defaultValue, onInput }) => {
</div> </div>
<input <input
style={{ style={{
position: "absolute",
left: 0,
visibility: "hidden", visibility: "hidden",
}} }}
class={"input"}
type="datetime-local" type="datetime-local"
step="1" step="1"
name="time" name="time"