Update input components

lib/component/input/date/DateTimeInput.tsx

@@ -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}`;
+}