Daniel Volz
89d565bc9d
* chore: fix lint errors and reduce warnings across codebase - Fix noExplicitAny catches in backend routes and plugins - Fix noNestedTernary issues in backend services - Add keyboard event handlers for useKeyWithClickEvents in frontend - Disable noImportantStyles rule in biome.json - Fix formatting errors across all changed files - Fix test file lint issues Closes #233 * fix: restore any types in test files for TS compatibility * fix: revert Auth.tsx dependency array changes that caused infinite re-render * fix: null-safe user.username access in AppContext dependency array
46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
/**
|
|
* DateTimeInput - Custom datetime input that displays date+time in the regional locale format.
|
|
*
|
|
* Overlays a formatted datetime string on top of a native <input type="datetime-local">,
|
|
* so the browser datetime popup still works but the displayed text
|
|
* uses our locale-aware formatting (e.g., 14.02.2026, 20:30 for Germany).
|
|
*/
|
|
import { type InputHTMLAttributes, useCallback, useRef } from "react";
|
|
import { formatDateTime, getNumericLocale } from "../utils/formatters";
|
|
|
|
interface DateTimeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
value: string;
|
|
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
}
|
|
|
|
export function DateTimeInput({ value, placeholder, className, ...rest }: DateTimeInputProps) {
|
|
const locale = getNumericLocale();
|
|
// datetime-local value is "YYYY-MM-DDTHH:MM" — formatDateTime handles this format
|
|
const displayValue = value ? formatDateTime(value, locale) : "";
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleClick = useCallback(() => {
|
|
try {
|
|
inputRef.current?.showPicker();
|
|
} catch {
|
|
// showPicker() may throw in some browsers — fallback to focus
|
|
inputRef.current?.focus();
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className={`date-input-wrapper ${className ?? ""}`}
|
|
onClick={handleClick}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") handleClick();
|
|
}}
|
|
>
|
|
<span className="date-input-display" aria-hidden="true">
|
|
{displayValue || placeholder || ""}
|
|
</span>
|
|
<input ref={inputRef} type="datetime-local" className="date-input-native" value={value} {...rest} />
|
|
</div>
|
|
);
|
|
}
|