          {JSON.stringify(data, null, 2)}

), }) } return (

( Event period Schedule your event by selecting a start and end date. )} /> ) } `,__src__:"src/registry/default/example/date-picker-form.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" zodResolver "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "@hookform/resolvers/zod"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" DateRange "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "react-day-picker"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" useForm "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "react-hook-form"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" z "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "zod"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" toast "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/hooks/use-toast"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" Button "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" DatePicker"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" DatePickerCalendar"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" DatePickerContent"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" DatePickerInput"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/date-picker"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" Form"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" FormControl"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" FormDescription"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" FormField"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" FormItem"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" FormLabel"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" FormMessage"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/form"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" FormSchema "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" z"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"object"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" eventPeriod"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" z"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"object"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" z"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"date"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"()."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"optional"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"(),"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" to"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" z"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"date"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"()."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"optional"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"(),"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" required_error"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "Event period is required "'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"superRefine"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"(("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"data"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" ctx"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" if"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" (!"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"data"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"from "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"||"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" !"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"data"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"to"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" ctx"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"addIssue"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" message"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "Event period is required."'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" code"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "custom"'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" }),"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"})"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DatePickerForm"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" form "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" useForm"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"z"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"infer"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">({"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" resolver"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" zodResolver"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"FormSchema"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onSubmit"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"data"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" z"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"infer"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" toast"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" title"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "You submitted the following values:"'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" description"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"pre className"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"code className"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"text-white"'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">{"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"JSON"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"stringify"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"data"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" null,"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" 2)}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ),"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"Form "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"{..."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"form"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"form onSubmit"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"form"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"handleSubmit"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"onSubmit"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:")}"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"space-y-8"'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"FormField"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" control"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"form"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"control"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" name"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"eventPeriod"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" render"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={({"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" field "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"})"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"FormItem"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"FormLabel"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"Event period"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"DatePicker"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" mode"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"range"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"field"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"value "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DateRange"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"field"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"onChange"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"FormControl"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"DatePickerInput className"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"w-[280px]"'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"DatePickerContent"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"DatePickerCalendar hideNavigation captionLayout"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"dropdown"'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"FormDescription"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" Schedule your event by selecting a start and end date."})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"FormMessage "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"Button type"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"submit"'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"Submit"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})})]})})})]})]})}function P(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(D,{...n})}):D(n)}function F(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(I);})(); ;return Component;

Date Picker

Installation

Examples

Date Picker

Input

Form