Datetime Picker Form

1"use client";
2 
3import { zodResolver } from "@hookform/resolvers/zod";
4import { useForm } from "react-hook-form";
5import * as z from "zod";
6import * as React from "react";
7import {
8  Form,
9  FormControl,
10  FormField,
11  FormItem,
12  FormLabel,
13  FormMessage,
14} from "@/components/ui/form";
15import { toast } from "@/components/ui/use-toast";
16import { LoadingButton } from "@/components/ui/loading-button";
17import { InlineCode } from "@/components/ui/inline-code";
18import { DateTimePicker } from "@/components/ui/datetime-picker";
19 
20const FormSchema = z.object({
21  datetime: z.date().optional(),
22});
23 
24const DEFAULT_VALUE = {
25  datetime: undefined,
26};
27 
28const DatetimePickerForm = () => {
29  const form = useForm<z.infer<typeof FormSchema>>({
30    defaultValues: DEFAULT_VALUE,
31    resolver: zodResolver(FormSchema),
32  });
33 
34  const [loading, setLoading] = React.useState(false);
35 
36  function onSubmit(data: z.infer<typeof FormSchema>) {
37    setLoading(true);
38 
39    setTimeout(() => {
40      setLoading(false);
41      toast({
42        title: "Your submitted data",
43        description: (
44          <>
45            <p className="text-red-600">
46              It is a <InlineCode>Date</InlineCode> object, the{" "}
47              <InlineCode>JSON.stringify</InlineCode> will show 0+ timezone. You
48              need to parse to your timezone to match your needs.
49            </p>
50            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
51              <code className="text-white">
52                {JSON.stringify(data, null, 2)}
53              </code>
54            </pre>
55          </>
56        ),
57      });
58    }, 500);
59  }
60 
61  return (
62    <Form {...form}>
63      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
64        <FormField
65          control={form.control}
66          name="datetime"
67          render={({ field }) => (
68            <FormItem className="flex w-72 flex-col gap-2">
69              <FormLabel htmlFor="datetime">Date time</FormLabel>
70              <FormControl>
71                <DateTimePicker value={field.value} onChange={field.onChange} />
72              </FormControl>
73              <FormMessage />
74            </FormItem>
75          )}
76        />
77        <LoadingButton loading={loading} type="submit">
78          Submit
79        </LoadingButton>
80      </form>
81    </Form>
82  );
83};
84export default DatetimePickerForm;