Black Lives Matter. Please consider donating to Black Girls Code today.

Marking specific dates in DatePickerSingle

Hello everyone, I was wondering if there is any way to mark or highlight specific dates in the DatePickerSingle component to guide the user by indicating which dates can be selected. I have historical data only on specific dates and would like to tell the user in the data picker about those. Thank you.

Hey there,

Judging by the DatePickerSingle guide (, it seems you can only specify a START and END date.

If you only have a few specific dates that can be picked (and only one at a time), maybe it’d be better/easier to use another tool, like a RangeSlider or a bunch of RadioButtons ? But that wouldn’t be convenient if you have too many available dates.

Thank you Jordan,

Yes, I saw the start and end date attributes, but in my application I would like to navigate by date through few years of historical data (with days without data). And the date picker is by far the best approach because we can quickly move to a specific day. I thought also about a combination of Dropdown components year-month-day but this is not as nice as the date picker.

What I am looking for a bit like a hotel booking data picker where you have some color that tells which day have vacancy. So this is a kind of filter option.

It would be nice to have such a feature though I understand this is not that easy to implement and may require large structures.


1 Like