Add format props to datepicker/calendar in using form

[kennethpole6]

might be good to add some format in the calendar.

[munezerobagira]

Do you have any workaround on how it can be implemented?

[kennethpole6]

My workaround is on how I format was like this. I had to use Object.assign() to assign new values to my form.

import { format } from "date-fns"
  const onSubmit = (data: FormValues) => {
    const dateFrom = format(data.date.from, "yyyy-MM-dd");
    const dateTo = format(data.date.from, "yyyy-MM-dd");
    Object.assign(data.date, { from: dateFrom, to: dateTo });
    mutate(data)
  };

[dan5py]

Hi @kennethpole6 you can check this section of the react-day-picker docs that explains how to use formatters. https://react-day-picker.js.org/guides/formatters

[kennethpole6]

Hi @kennethpole6 you can check this section of the react-day-picker docs that explains how to use formatters. https://react-day-picker.js.org/guides/formatters

is there any way to format the datepicker within the form? I'm using the shadcn form

<FormField
      control={form.control}
      name="receipt_date_from"
      render={({ field }) => (
        <FormItem className="w-full">
          <FormLabel>Receipt Date From</FormLabel>
          <Popover>
            <PopoverTrigger asChild>
              <FormControl>
                <Button
                  variant={"outline"}
                  className={cn(
                    "pl-3 text-left font-normal",
                    !field.value && "text-muted-foreground"
                  )}
                >
                  {field.value ? (
                    format(field.value, "yyyy-MM-dd")
                  ) : (
                    <span>Pick a date</span>
                  )}
                  <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                </Button>
              </FormControl>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0" align="start">
              <Calendar
                mode="single"
                //proposed props 
                format="YYYY-MM-DD"
                selected={field.value}
                onSelect={field.onChange}
                initialFocus
              />
            </PopoverContent>
          </Popover>

          <FormMessage />
        </FormItem>
      )}
    />

[codingwithashu]

Has anyone created a reusable component for this Datepicker, selected,onSelect, or disabled?

[vmewada01]

please mention form schema because it always hits form error , can anyone please upload the complete example for using calender inside the form along with the form schema .

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.