I am using date picker from shadcn which basically using date picker from react date picker. When I select particular date I get the value which is off by one day. How can I can I fix it? ( Date of Issue {field.value ? ( format(field.value, "PPP") ) : ( Pick a date )} date > new Date() || date )} />Struggling with this for hours now and I can't seem to fix it. Any help appreciated

Date picker off by one day

Unanswered

Rex posted this in #help-forum

RexOP

2024-02-20T07:49:35.000Z

I am using date picker from shadcn which basically using date picker from react date picker. When I select particular date I get the value which is off by one day. How can I can I fix it?

  <FormField
           control={form.control}
            name="dateOfIssue"
            render={({ field }) => (
        <FormItem className="grid grid-cols-4 items-center">
          <FormLabel className="col-span-1 text-center">
                Date of Issue
              </FormLabel>
              <div className="col-span-3 ">
                <Popover>
                  <PopoverTrigger asChild>
                    <FormControl>
                      <Button
                        variant={"outline"}
                        className={cn(
                          "w-[240px] pl-3 text-left font-normal",
                          !field.value && "text-muted-foreground",
                        )}
                      >
                        {field.value ? (
                          format(field.value, "PPP")
                        ) : (
                          <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={formatDate(field.value)}
                      onSelect={field.onChange}
                      disabled={(date) =>
                        date > new Date() || date < new Date("1900-01-01")
                      }
                    initialFocus
                   />
                 </PopoverContent>
              </Popover>
           </div>
          <FormMessage />
        </FormItem>
     )}
        />

Struggling with this for hours now and I can't seem to fix it. Any help appreciated

7 Replies

Barbary Lion

2024-02-20T09:15:42.000Z

Have you supplied a default value that can be wrong?

RexOP

2024-02-20T09:30:06.000Z

dafult value is not cauisng the issue

  const form = useForm({
    resolver: zodResolver(issueFormSchema),
    defaultValues: {
      linkTo: "jobCard",
      dateOfIssue: new Date(),
      jobCard: "",
      quantity: 1,
      issuedTo: "",
    },
  });

For today's date it works as expected but for other dates I get one day off eg one day less

Barbary Lion

2024-02-20T09:35:25.000Z

Maybe your browser time is incorrect?

paste this in your console

const format = (date) => {
const formatter = new Intl.DateTimeFormat('NL-nl');
return formatter.format(date)
}

console.log(format(new Date()))

RexOP

2024-02-20T09:38:48.000Z

getting 20-2-2024

Don't know what is the issue

here is what I am planning to do

  const formatDate = (date: any) => {
    if (!isToday(date)) {
      return addDays(date, 1);
    }
    return date;
  };

  const onSubmit = async (values: z.infer<typeof issueFormSchema>) => {
    values.dateOfIssue = formatDate(values.dateOfIssue);

    try {
      await axios.post(`/api/products/${id}/issue-product`, { ...values, id });
   
      setOpen((prev) => false);
      toast.success("Item issued Successfully");
    } catch (error) {
      // @ts-ignore
      toast.error(error?.response?.data);
    }
  };

will this work for other time zone because it work with my current time zone