{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "datetime-picker-form",
  "title": "Datetime Picker Form",
  "description": "component for the Datetime Picker Form",
  "registryDependencies": [
    "datetime-picker"
  ],
  "files": [
    {
      "path": "app/registry/datetime-picker/usage/datetime-picker-form.tsx",
      "content": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useForm } from \"react-hook-form\";\nimport * as z from \"zod\";\nimport * as React from \"react\";\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/components/ui/form\";\nimport { toast } from \"@/components/ui/use-toast\";\nimport { LoadingButton } from \"@/components/ui/loading-button\";\nimport { InlineCode } from \"@/components/ui/inline-code\";\nimport { DateTimePicker } from \"@/components/ui/datetime-picker\";\n\nconst FormSchema = z.object({\n  datetime: z.date().optional(),\n});\n\nconst DEFAULT_VALUE = {\n  datetime: undefined,\n};\n\nconst DatetimePickerForm = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    defaultValues: DEFAULT_VALUE,\n    resolver: zodResolver(FormSchema),\n  });\n\n  const [loading, setLoading] = React.useState(false);\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    setLoading(true);\n\n    setTimeout(() => {\n      setLoading(false);\n      toast({\n        title: \"Your submitted data\",\n        description: (\n          <>\n            <p className=\"text-red-600\">\n              It is a <InlineCode>Date</InlineCode> object, the{\" \"}\n              <InlineCode>JSON.stringify</InlineCode> will show 0+ timezone. You\n              need to parse to your timezone to match your needs.\n            </p>\n            <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n              <code className=\"text-white\">\n                {JSON.stringify(data, null, 2)}\n              </code>\n            </pre>\n          </>\n        ),\n      });\n    }, 500);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"datetime\"\n          render={({ field }) => (\n            <FormItem className=\"flex w-72 flex-col gap-2\">\n              <FormLabel htmlFor=\"datetime\">Date time</FormLabel>\n              <FormControl>\n                <DateTimePicker value={field.value} onChange={field.onChange} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <LoadingButton loading={loading} type=\"submit\">\n          Submit\n        </LoadingButton>\n      </form>\n    </Form>\n  );\n};\nexport default DatetimePickerForm;\n",
      "type": "registry:component",
      "target": "components/spectrumui/date-picker-form.tsx"
    }
  ],
  "type": "registry:component"
}