import { DateInput, DateInputProps } from "@mantine/dates";
import dayjs from "dayjs";
import { useState } from "react";

const DAYJS_FMT = "YYYY-MM-DD HH:mm";

const dateParser: DateInputProps["dateParser"] = (input) => {
    if (!input) return null;
    const parsed = dayjs(input, DAYJS_FMT, true);
    return parsed.isValid() ? parsed.toDate() : null;
};

export function DateInputBug() {
    const [value, setValue] = useState<string | null>(null);

    return (
        <div className="px-10 py-4 flex flex-col gap-y-4">
            {/* state is updated correctly (UTC string) */}
            <div>{JSON.stringify({ value })}</div>

            {/* input cannot display correctly on HH:mm , it always reverts back to 00:00 */}
            <DateInput
                description="controlled"
                clearable
                valueFormat={DAYJS_FMT}
                dateParser={dateParser}
                value={value}
                onChange={setValue}
            />

            {/* uncontrolled: input displays correctly up to HH:mm */}
            <DateInput
                description="uncontrolled"
                clearable
                valueFormat={DAYJS_FMT}
                dateParser={dateParser}
            />
        </div>
    );
}

import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
dayjs.extend(customParseFormat);
dayjs.extend(utc);
dayjs.extend(timezone);