How do you set DatePicker's min/max date?

[markoffden]

Hello, I am curious if I miss some simple way to set min/max date in DatePicker component. It expects DateValue type, is there any helper provided to convert Date object to DateValue? I have tried to use a literal there, e.g.:

{
    year: 2021,
    month: 10,
    day: 25
}

but get TS errors.

[markoffden]

Ok, I have sorted in out. It may be done by utilising CalendarDate constructor from @internationalized/date package. I am new to zag/chakra components, maybe it's an obvious thing for seasoned users, but IMHO worth mentioning in the docs.

[Omikorin]

@markoffden could you provide an example of your solution? I'll be happy to add it to the docs :)

[EfstathiadisD]

Yo. Can you provide an example. I am using the selectToday from the api which works quite well itself but when I am trying to use the setValue it doesn't work. It throws the error:

Uncaught TypeError: Cannot read properties of undefined (reading 'identifier')

The error seems to come from this one here..

export function toCalendar<T extends AnyCalendarDate>(date: T, calendar: Calendar): T {
  if (date.calendar.identifier === calendar.identifier) {
    return date;
  }

For reference here is the code I am using..

const OPTIONS = [
  {
    label: "All time",
    from: new CalendarDate(2021, 10, 7),
    to: new CalendarDate(2023, 10, 7),
  },
] as const;

<Button onClick={() => setValue([option.from, option.to])}>
  {option.label}
</Button>

And here is the output of the from and to..

{
    "label": "All time",
    "from": {
        "calendar": {
            "identifier": "gregory"
        },
        "era": "AD",
        "year": 2021,
        "month": 10,
        "day": 7
    },
    "to": {
        "calendar": {
            "identifier": "gregory"
        },
        "era": "AD",
        "year": 2023,
        "month": 10,
        "day": 7
    }
}

[markoffden]

To everyone in this thread :)

I have eventually moved on and picked up good old react-datepicker, I had some use cases and requirements in my project where ArkUI datepicker was not sufficient (e.g. month picker).

When I have some extra time, I will put together a code example of how this particular issue was solved