Handle datetime-local for Future API

[lhapaipai]

Hi team!

I've followed the discussion related to the same topic with conform v1: #738

I'm wondering what could be the best practice for use with the future API.

Context

I would like to use a simple native input datetime-local with conform and actually, I need either to:

1. Prepare the data for the default value (like updatedAt in the example below)
2. Define a custom DateTimeField component with another hidden input (for the example I've made the input visible)

Reproduction

import { coerceFormValue, formatResult } from "@conform-to/zod/v4/future";
import {
  FieldName,
  FormProvider,
  isDirty,
  parseSubmission,
  report,
  useControl,
  useField,
  useForm,
  useFormData,
} from "@conform-to/react/future";
import { z } from "zod/v4";
import { data, Form } from "react-router";

const schema = coerceFormValue(
  z.object({
    createdAt: z.date(),
    updatedAt: z.date(),
  }),
);

export async function action({ request }) {
  const formData = await request.formData();
  const submission = parseSubmission(formData);
  const result = schema.safeParse(submission.payload);

  if (!result.success) {
    return report(submission, {
      error: formatResult(result),
    });
  }

  console.log("update server side", result.data);
  return data(null);
}

export async function loader() {
  const infos = {
    updatedAt: new Date("2026-01-01T12:00:00"),
    createdAt: new Date("2026-01-01T06:00:00"),
  };
  return { infos };
}

// Custom field component approach
function DateTimeField({ name }: { name: FieldName<Date> }) {
  const field = useField(name);
  const control = useControl({
    defaultValue: field.defaultValue,
  });
  return (
    <>
      <input type="text" ref={control.register} name={field.name} />
      <input
        type="datetime-local"
        value={control.value?.substring(0, 16)}
        onChange={(e) => {
          control.change(e.target.valueAsDate?.toISOString() ?? "");
        }}
      />
    </>
  );
}

export default function Component({ loaderData, actionData }) {
  const { infos } = loaderData;

  // Data preparation approach
  const prepared = {
    createdAt: infos.createdAt,
    updatedAt: infos.updatedAt.toISOString().substring(0, 16),
  };

  const { form, fields } = useForm(schema, {
    id: "form-zod",
    defaultValue: prepared,
    lastResult: actionData,
  });

  const dirty = useFormData(form.id, (formData) => {
    return isDirty(formData, { defaultValue: prepared });
  });

  return (
    <FormProvider context={form.context}>
      <div>Dirty {dirty ? "yes" : "no"}</div>
      <Form method="post" {...form.props}>
        {/* Using custom component */}
        <DateTimeField name={fields.createdAt.name} />

        {/* Using prepared data */}
        <input
          type="datetime-local"
          defaultValue={fields.updatedAt.defaultValue}
          name={fields.updatedAt.name}
        />
        <div>errors: {fields.updatedAt.errors}</div>
        <div>
          <button>Save</button>
        </div>
      </Form>
    </FormProvider>
  );
}

Question

I think I'm missing something but I can't find what.

I'm wondering why I need to prepare a date for the input (string without the "Z" suffix) but I don't need to prepare a checkbox ("on" string) if I wanted to use a checkbox.

Expected behavior: Being able to pass a Date object directly as defaultValue for a datetime-local input, similar to how checkboxes work.

Current behavior: I need to either:

• Prepare the data by converting the Date to a string with .toISOString().substring(0, 16)
• Create a custom component that handles the conversion

Is this the intended way to work with date inputs, or is there a more idiomatic approach I should be using?

Thanks for your help!

[edmundhung]

Thanks for bringing this up. Stripping the Z suffix does mean we lose explicit timezone information, but it probably makes sense as a default to treat everything as UTC.

To support a different timezone, people would need a custom serialize function. The only thing I am still not fully sure about is how best to support cases where the datetime needs to be coerced based on another field value (for example, when the timezone is provided by the user in the same form), but overall I am on board with the suggestion.

[lhapaipai]

Hi,

I've been working on handling datetime-local inputs with @conform-to/react and @conform-to/zod, and I'd like to know whether my approach follows the recommended practices.

The schema uses z.date() wrapped with coerceFormValue to handle the string-to-Date coercion on the client side. On the display side, I convert the Date to a local datetime string using local getters (getFullYear, getMonth, etc.) to match the browser's native behavior for datetime-local inputs. I also reuse the same formatting function inside the isDirty serializer so that the dirty check compares values consistently.

const baseSchema = z.object({
  updatedAt: z.date(),
});

const clientSchema = coerceFormValue(baseSchema);


export function parseDate(unknown: Date | string | number) {
  return typeof unknown === "string"
    ? new Date(unknown)
    : typeof unknown === "number"
      ? new Date(unknown * 1000)
      : unknown;
}

export function formatDateToDatetimeLocal(unknown: Date | number | string): string {
  const date = parseDate(unknown);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  return `${year}-${month}-${day}T${hours}:${minutes}`;
}

export default function Component({ loaderData, actionData }: Route.ComponentProps) {
  const { user } = loaderData;

  const defaultValue = {
    updatedAt: user.updatedAt,
  };

  const { form, fields } = useForm(clientSchema, {
    id: "form-zod",
    defaultValue,
    lastResult: actionData,
  });

  const dirty = useFormData(form.id, (formData) => {
    return isDirty(formData, {
      defaultValue,
      serialize(value, defaultSerialize) {
        if (value instanceof Date) {
          return formatDateToDatetimeLocal(value);
        }

        return defaultSerialize(value);
      },
    });
  });

  return (
    <div>
      <div>Dirty {dirty ? "Yes" : "No"}</div>
      <Form method="post" {...form.props} className="flex flex-col gap-2">
        <div>
          updatedAt
          <input
            className="border"
            type="datetime-local"
            defaultValue={formatDateToDatetimeLocal(fields.updatedAt.defaultValue)}
            name={fields.updatedAt.name}
          />
        </div>

        <Button>Save</Button>
      </Form>
    </div>
  );
}