Date component, limit to specific dates

💬 App Building
1

Trying to limit the date picker choice to specific dates in a calendar picker of the date component.

I have a database table with allowable dates and want to gray out/disable unpickable dates but I don't see a datasource to feed these in or another property to set with an array of allowed dates.

1 Like
3

I was hoping to find an allowedDates property to which I could supply an array and only those dates would allow selection, others would be grayed out.

1 Like
4

Hello @swaggerutah ,

If you want a more dynamic experience with grayed-out or disabled dates, you can use a Custom Component with a library like react-datepicker or FullCalendar that supports this feature. Here's how:

  1. Create a Custom Component: Use React or any supported library to render a calendar with disabled dates.
  2. Pass Allowed Dates Dynamically: Fetch the allowed dates and pass them as props to the component.
  3. Set the Selected Date: Use Retool's setValue to synchronize the custom component with Retool's state.
4 Likes
5

Hi @swaggerutah ,

Thanks for reaching out! This isn't possible today, but I've added a +1 to the existing feature request.

In the meantime, you can configure a custom validation rule on the date picker as described here, or create a custom component as @WidleStudioLLP suggested.