When using
min
or
max
attribute, months and years are rendered with a
data-disabled
attribute but this information is not available when rendering the cells.
In our case, we're using custom Button to render each cell, and we would like to set them as disabled (using a React prop on the Button component), but it is quite difficult to achieve.
(we partially made it using refs, but behaviour on current month was very weird, plus it felt very hacky)
What would be nice, is to have the disabled information in the cell, which would allow us to do something like:
<DatePicker.TableBody>
{
datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
<DatePicker.TableRow key={ id }>
{
years.map((year, i) => (
<DatePicker.TableCell
key={ i }
value={ year.value }>
<DatePicker.TableCellTrigger asChild>
<Button
disabled={ year.disabled } // <= this would be nice to add
...>
{ year.label }
</Button>
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))
}
</DatePicker.TableRow>
))
}
</DatePicker.TableBody>