How do you set DatePicker's min/max date? #1829
-
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.:
but get TS errors. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 1 reply
-
Ok, I have sorted in out. It may be done by utilising |
Beta Was this translation helpful? Give feedback.
-
Yo. Can you provide an example. I am using the
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
|
Beta Was this translation helpful? Give feedback.
-
To everyone in this thread :) I have eventually moved on and picked up good old When I have some extra time, I will put together a code example of how this particular issue was solved |
Beta Was this translation helpful? Give feedback.
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.