Date Range Picker not working NextJS server actions

[Mahdirah0]

I am using shadcn Form and Date Range Picker, I tried to use server action and I recieved no date or any data.

This is my server action and data that prints out is empty.

'use server';

type FormState = {
  message: string;
};

export const dateAction = (prevState: FormState, data: FormData) => {
  console.log(data);
  return { message: 'hello world' };
};

This is my date range picker, I am using it inside Form component both from shadcn

 <Form {...form}>
            {/* {state?.msg !== '' && <p>{state.msg}</p>} */}
            <form
              ref={formRef}
              action={formAction}
              // onSubmit={form.handleSubmit(() => console.log("ok"))}
              className='space-y-4'
            >
                <FormField
                    control={form.control}
                    name={name}
                    render={({ field }) =>
                    <FormItem>
                      <FormLabel>{label}</FormLabel>
                      <div className={cn('grid gap-2')}>
                        <Popover>
                          <PopoverTrigger asChild>
                            <FormControl>
                              <Button
                                name={name}
                                id={id}
                                variant={'outline'}
                                className={cn(
                                  'w-[300px] justify-start text-left font-normal',
                                  !field.value && 'text-muted-foreground'
                                )}
                              >
                                <CalendarIcon className='mr-2 h-4 w-4' />
                                {field?.value?.from ? (
                                  field?.value?.to ? (
                                    <>
                                      {format(field.value.from, 'LLL dd, y')} -{' '}
                                      {format(field.value.to, 'LLL dd, y')}
                                    </>
                                  ) : (
                                    format(field.value.from, 'LLL dd, y')
                                  )
                                ) : (
                                  <span>Pick a date</span>
                                )}
                              </Button>
                            </FormControl>
                          </PopoverTrigger>
                          <PopoverContent className='w-auto p-0' align='start'>
                            <Calendar
                              initialFocus
                              mode='range'
                              defaultMonth={field?.value?.from}
                              selected={field.value}
                              onSelect={field.onChange}
                              numberOfMonths={2}
                            />
                          </PopoverContent>
                        </Popover>
                      </div>
                    </FormItem>
                    }
                  />
              <div className='text-end'>
                <Button className='justify-end' type='submit'>
                  Submit
                </Button>
              </div>
            </form>
          </Form>

In client side, the date is shown from console.log when submitted,

The problem is that there is no "name" attribute that server action requires and I'm not sure where to put the "name" attribute, I have tried to put the "name" attribute on every html tag, I tried swapping the Button (inside FormControl) for a Input but that causes the placeholder to show "Object, Object" but it did show on server action console.log but the value was was empty strings.

I know that I can call the server action inside the onSubmit call and add my parameters there but I would like to avoid that as I would like to use "useFormState" and "UseFormStatus" Hook.

I will do more research and I'll try to use "hidden input"
"Good to know:

An alternative is to pass arguments as hidden input fields in the form (e.g. ). However, the value will be part of the rendered HTML and will not be encoded.
.bind works in both Server and Client Components. It also supports progressive enhancement." - From Next.js docs

[AutoScrape123TX]

Same problem here and I didn't find the solution...

[AutoScrape123TX]

The hacky way to do it while it's fixed is to insert <input type="hidden" name={field.name} value={field.value?.toISOString()}/> just below <FormItem className="flex flex-col"> https://www.reddit.com/r/nextjs/comments/199jeb8/comment/kyvwj7n/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

[artoodeeto]

hello do you have any other solution for this? I get an error:

A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.