BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
Code Issues 3 Packages Projects Releases Wiki Activity

Update input components

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-14 16:24:04 -05:00
parent f40845723d
commit aaa15b1cfc
6 changed files with 161 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
lib/component/input/date/DateInput.tsx
View File

@@ -1,26 +1,47 @@
import type { DateInputProps } from "$/types/InputTypes";
import clsx from "clsx";
import moment from "moment";
import { type ChangeEvent } from "react";
export default function DateInput({
id,
className,
defaultValue,
value,
onChange
}: DateInputProps){
onChange,
...inputProps
}: Readonly<DateInputProps>){
//Used to translate the string from the input to a date for onChange
const changeDate = (e: ChangeEvent<HTMLInputElement>) => {
const [ year, month, day ] = e.target.value.split("-").map(Number);
const newDate = new Date(year, month - 1, day);
onChange(Number.isNaN(newDate.getTime()) ? undefined : newDate);
};
return (
<input
type="date"
id={id}
className={clsx(
"border rounded-lg px-2 py-1",
className
)}
defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DD") : undefined}
value={value ? moment(value).format("YYYY-MM-DD") : undefined}
onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DD").toDate()))}
value={formatDate(value)}
onChange={changeDate}
{...inputProps}
/>
);
}
//Used to translate the date to a string for the input
function formatDate(date: Date | undefined): string{
if(!date || Number.isNaN(date.getTime())){
return "";
}
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
}

56
lib/component/input/date/DateTimeInput.tsx
View File

@@ -1,15 +1,38 @@
import type { DateInputProps } from "$/types/InputTypes";
import clsx from "clsx";
import moment from "moment";
import type { ChangeEvent } from "react";
export default function DateTimeInput({
id,
className,
defaultValue,
step = 60,
value,
onChange
}: DateInputProps){
onChange,
...inputProps
}: Readonly<DateInputProps>){
const changeDateTime = (e: ChangeEvent<HTMLInputElement>) => {
const match = new RegExp(/^(\d+)-(\d+)-(\d+)T(\d+):(\d+)(?::(\d+)(?:\.(\d+))?)?$/).exec(e.target.value);
if(!match){
onChange(undefined);
return;
}
const [ ,
y, mo, d,
h, mi, s = "0", ms = "0"
] = match;
const date = new Date(
Number(y), Number(mo) - 1, Number(d),
Number(h), Number(mi), Number(s), Number(ms)
);
onChange(Number.isNaN(date.getTime()) ? undefined : date);
}
return (
<input
type="datetime-local"
@@ -18,9 +41,28 @@ export default function DateTimeInput({
"border rounded-lg px-2 py-1 outline-none",
className
)}
defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DDTHH:mm") : undefined}
value={value ? moment(value).format("YYYY-MM-DDTHH:mm") : undefined}
onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DDTHH:mm").toDate()))}
value={formatDateTime(value)}
onChange={changeDateTime}
step={step}
{...inputProps}
/>
);
}
function formatDateTime(date: Date | undefined){
if(!date || Number.isNaN(date.getTime())){
return "";
}
const y = date.getFullYear();
const mo = String(date.getMonth() + 1).padStart(2, "0");
const d = String(date.getDate()).padStart(2, "0");
const h = String(date.getHours()).padStart(2, "0");
const mi = String(date.getMinutes()).padStart(2, "0");
const s = String(date.getSeconds()).padStart(2, "0");
const ms = String(date.getMilliseconds()).padStart(2, "0");
return `${y}-${mo}-${d}T${h}:${mi}:${s}.${ms}`;
}

55
lib/component/input/date/TimeInput.tsx
View File

@@ -1,15 +1,33 @@
import type { DateInputProps } from "$/types/InputTypes";
import clsx from "clsx";
import moment from "moment";
import type { ChangeEvent } from "react";
export default function TimeInput({
id,
className,
defaultValue,
step = 60,
value,
onChange
}: DateInputProps){
onChange,
...inputProps
}: Readonly<DateInputProps>){
const changeTime = (e: ChangeEvent<HTMLInputElement>) => {
const match = new RegExp(/^(\d+):(\d+)(?::(\d+)(?:\.(\d+))?)?$/).exec(e.target.value);
if(!match){
onChange(undefined);
return;
}
const [ , h, m, s = "0", ms = "0"] = match;
const newDate = new Date();
newDate.setHours(Number(h), Number(m), Number(s), Number(ms));
onChange(Number.isNaN(newDate) ? undefined : newDate);
}
return (
<input
type="time"
@@ -18,9 +36,32 @@ export default function TimeInput({
"border rounded-lg px-2 py-1 outline-none",
className
)}
defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DDTHH:mm") : undefined}
value={value ? moment(value).format("YYYY-MM-DDTHH:mm") : undefined}
onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DDTHH:mm").toDate()))}
value={formatTime(value, step)}
onChange={changeTime}
step={step}
{...inputProps}
/>
);
}
function formatTime(date: Date | undefined, step: number){
if(!date || Number.isNaN(date.getTime())){
return "";
}
const h = String(date.getHours()).padStart(2, "0");
const m = String(date.getMinutes()).padStart(2, "0");
const s = String(date.getSeconds()).padStart(2, "0");
const ms = String(date.getMilliseconds()).padStart(3, "0");
let time = `${h}:${m}`;
if(step < 60){
time += `:${s}`;
}
if(step < 1){
time += `.${ms}`;
}
return time;
}