52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
"use client";
|
||
|
||
type DatePickerProps = {
|
||
value: string;
|
||
onChange: (value: string) => void;
|
||
required?: boolean;
|
||
name?: string;
|
||
className?: string;
|
||
showWeekButtons?: boolean;
|
||
centerInput?: boolean;
|
||
};
|
||
|
||
export default function DatePicker({
|
||
value,
|
||
onChange,
|
||
required = false,
|
||
name,
|
||
className = "",
|
||
showWeekButtons = true,
|
||
centerInput = false
|
||
}: DatePickerProps) {
|
||
function shiftDate(days: number) {
|
||
const base = value ? new Date(value) : new Date();
|
||
if (Number.isNaN(base.getTime())) return;
|
||
base.setDate(base.getDate() + days);
|
||
onChange(base.toISOString().slice(0, 10));
|
||
}
|
||
|
||
const invalid = required && !value;
|
||
|
||
return (
|
||
<div className={`inline-flex w-full items-center overflow-hidden rounded-full border ${invalid ? "border-red-400/70" : "border-accent-weak"} bg-panel ${className}`}>
|
||
{showWeekButtons ? (
|
||
<button type="button" className="h-11 w-full text-sm text-muted hover:bg-accent-soft" onClick={() => shiftDate(-7)}>«</button>
|
||
) : null}
|
||
<button type="button" className="h-11 w-full text-sm text-muted hover:bg-accent-soft" onClick={() => shiftDate(-1)}>‹</button>
|
||
<input
|
||
name={name}
|
||
type="date"
|
||
className={`no-date-icon h-11 w-40 bg-transparent px-3 text-sm text-[color:var(--color-text)] outline-none ${centerInput ? "text-center" : ""}`}
|
||
value={value}
|
||
onChange={e => onChange(e.target.value)}
|
||
required={required}
|
||
/>
|
||
<button type="button" className="h-11 w-full text-sm text-muted hover:bg-accent-soft" onClick={() => shiftDate(1)}>›</button>
|
||
{showWeekButtons ? (
|
||
<button type="button" className="h-11 w-full text-sm text-muted hover:bg-accent-soft" onClick={() => shiftDate(7)}>»</button>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|