reactjs - HeroUI react does not have a DateValue - Stack Overflow

admin管理员组

文章数量:1406937

I am trying to add a DateInput to a form and set its value from the model value, which is a formatted string. I am trying to parse it according to the HeroUI doc:

<DateInput
  className="max-w-sm"
  label="Active from"
  value={parseDate(activeFrom)}
</DateInput>

And get the following exception: Ts2322: CalendarDate is not assignable to type DateValue | null | undefined

The I tried to construct an object of the DateValue type and found out, that the @heroui/react does not have this type. I have the only dependency in my package.lock: "@heroui/react": "^2.6.14"

what dependencies do I need to add to obtain the DateValue type?

Thanks in advance!

I am trying to add a DateInput to a form and set its value from the model value, which is a formatted string. I am trying to parse it according to the HeroUI doc:

<DateInput
  className="max-w-sm"
  label="Active from"
  value={parseDate(activeFrom)}
</DateInput>

And get the following exception: Ts2322: CalendarDate is not assignable to type DateValue | null | undefined

The I tried to construct an object of the DateValue type and found out, that the @heroui/react does not have this type. I have the only dependency in my package.lock: "@heroui/react": "^2.6.14"

what dependencies do I need to add to obtain the DateValue type?

Thanks in advance!

• reactjs
• npm
• nextui

Share Improve this question Follow asked Mar 7 at 15:57 Andrei IsakovAndrei Isakov 5911 silver badge33 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You need to install the @internationalized/date dependency, as the DateValue type is exported by it. Refer to heroui's documentation for details.

See the example:

import { DateInput } from "@heroui/react";
import type { DateValue } from "@internationalized/date";
import { CalendarDate, parseDate } from "@internationalized/date";

export default function App() {
  return (
    <DateInput
      isReadOnly
      defaultValue={parseDate("2024-04-04")}
      label={"Birth date"}
      placeholderValue={new CalendarDate(1995, 11, 6)}
    />
  );
}

本文标签： reactjsHeroUI react does not have a DateValueStack Overflow