CODEWITHSUNDEEP
reactjsnpmnextui
Andrei Isakov
Andrei Isakov

Reputation: 61

HeroUI react does not have a DateValue

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!

Upvotes: 0

Views: 14

Answers (1)

yuanyxh
yuanyxh

Reputation: 117

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)}
    />
  );
}

Upvotes: 0

Related Questions