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.

[bywyd]

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

import { cn } from "@/lib/utils"
import { Button } from "../ui/button"
import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../ui/form"
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
import { CalendarIcon } from "lucide-react"
import { Calendar } from "../ui/calendar"
import { format } from "date-fns"

const SingleDatePicker = ({
    field, label, description, placeholder, readonly, disabled
}: {
    field: any, label?: string, description?: string | React.ReactNode, placeholder?: string, readonly?: boolean, disabled?: boolean
}) => {
    return (
        <FormItem className="flex flex-col">
                {label && <FormLabel>{label}</FormLabel>}
              <Popover>
                <PopoverTrigger asChild>
                  <FormControl>
                    <Button
                      variant={"outline"}
                      className={cn(
                        "min-w-[180px] pl-3 text-left font-normal",
                        !field.value && "text-muted-foreground"
                      )}
                        disabled={disabled}

                    >
                      {field.value ? (
                        format(field.value, "d LLL y")
                      ) : (
                        <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"
                    selected={field.value}
                    onSelect={field.onChange}
                    disabled={(date) =>
                      date < new Date()
                    }
                    initialFocus

                  />
                </PopoverContent>
              </Popover>
              {
                description && <FormDescription>{description}</FormDescription>
              }
              <FormMessage />
        </FormItem>
    )
}

const RangeDatePicker = ({
    field, label, description, placeholder, readonly, disabled
}: {
    field: any, label?: string, description?: string | React.ReactNode, placeholder?: string, readonly?: boolean, disabled?: boolean
}) => {
    return (
        <FormItem>
            <div>
                {label && <FormLabel>{label}</FormLabel>}
            </div>
            <Popover>
                <PopoverTrigger asChild>
                <Button
                    variant={"outline"}
                    className={cn(
                    "min-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(new Date(field.value.from), "dd/MM/y")} -{" "}
                        {format(new Date(field.value.to), "dd/MM/y")}
                    </>
                    ) : (
                    <span>Pick a date range</span>
                    )}
                </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                <Calendar
                    mode="range"
                    selected={field.value}
                    onSelect={field.onChange}
                    numberOfMonths={2}
                    disabled={(date) => date < new Date("1900-01-01")}
                    initialFocus
                />
                </PopoverContent>
            </Popover>
            <FormMessage />
        </FormItem>
    )
}

export { SingleDatePicker, RangeDatePicker }