feat: let a date node pick a time

packages/payload-plugin-json-form-builder/src/components/JsonBuilderSettings.tsx

@@ -6,7 +6,7 @@ import { toWords } from "payload/shared";
 import { IconButton } from "./IconButton.js";
 import { JsonInput } from "./JsonInput.js";
 import { holdsFields } from "../field/typedJson.js";
-import type { TypedNode } from "../field/typedJson.js";
+import type { Leaf, TypedNode } from "../field/typedJson.js";
 
 type Settings = { node: TypedNode; onChange: (node: TypedNode) => void };
 
@@ -19,13 +19,25 @@ const put = (node: TypedNode, key: string, value: unknown) =>
   ({ ...node, [key]: value }) as TypedNode;
 
 const Starts = ({ node, onChange }: Settings) => (
-  <JsonInput
-    id="builder-value"
-    kind="date"
-    label="Default value"
-    onChange={(next) => onChange(put(node, "value", next))}
-    value={"value" in node ? node.value : undefined}
-  />
+  <>
+    <CheckboxInput
+      checked={(node as Leaf).time === true}
+      id="builder-time"
+      label="Pick a time as well"
+      name="builder-time"
+      onToggle={() =>
+        onChange((node as Leaf).time ? without(node, "time") : put(node, "time", true))
+      }
+    />
+    <JsonInput
+      id="builder-value"
+      kind="date"
+      label="Default value"
+      onChange={(next) => onChange(put(node, "value", next))}
+      time={(node as Leaf).time}
+      value={"value" in node ? node.value : undefined}
+    />
+  </>
 );
 
 const Limit = ({ node, onChange, name }: Settings & { name: string }) => (

packages/payload-plugin-json-form-builder/src/components/JsonInput.tsx

@@ -15,6 +15,7 @@ export const JsonInput = ({
   onChange,
   readOnly,
   required,
+  time,
   value,
 }: {
   fault?: string;
@@ -26,6 +27,7 @@ export const JsonInput = ({
   onChange: (value: string | number | null) => void;
   readOnly?: boolean;
   required?: boolean;
+  time?: boolean;
   value: unknown;
 }) => {
   if (kind === "number") {
@@ -62,9 +64,12 @@ export const JsonInput = ({
     return (
       <div className={cn("field-type date-time-field", fault && "error")}>
         {label ? <FieldLabel label={label} path={id} required={required} /> : null}
+        {/* Payload's "default" appearance overwrites whatever time was picked with noon, so a date
+            node holds a time only while the picker is told to show one. */}
         <DatePicker
           id={id}
           onChange={(next) => onChange(next ? next.toISOString() : null)}
+          pickerAppearance={time ? "dayAndTime" : "default"}
           readOnly={readOnly}
           value={value ? String(value) : undefined}
         />

packages/payload-plugin-json-form-builder/src/components/JsonNode.tsx

@@ -229,6 +229,7 @@ export const JsonNode = ({
         onChange={set}
         readOnly={readOnly}
         required={node.required}
+        time={node.time}
         value={value}
       />
     ) : node.type === "checkbox" ? (

packages/payload-plugin-json-form-builder/src/field/checks.ts

@@ -123,6 +123,7 @@ const KEYS: Record<string, Rule> = {
   rows: { kind: "array", needed: ["array"], only: ["array"] },
   showIf: { kind: "object" },
   source: { kind: "string" },
+  time: { kind: "boolean", only: ["date"] },
   type: { kind: "string" },
   value: { kind: "any", needed: LEAVES, only: LEAVES, reads: "a field, not a group or a list" },
 };

packages/payload-plugin-json-form-builder/src/field/typedJson.ts

@@ -24,6 +24,7 @@ export type Leaf = Base & {
   options?: string[];
   min?: number;
   max?: number;
+  time?: boolean;
 };
 export type Container = Base & {
   type: "group" | "collapsible" | "tabs" | "tab";