Datepicker - month and year disable state
Damien Pellier
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>
Damien Pellier
Just found that this is already doable using:
datePicker.getYearTableCellState(year).disabled
Keith Gunn
Same issue, I just wrote a function to check if the date is outside min/max range and use that value to set button disabled.