I am looking to enhance the appearance of today's date in a datepicker by adding a small circle or filled dot below the number. For example, if today is the 1st of March, I want a dot to appear just below the number 1 on the datepicker.
Initially, I tried to achieve this effect using CSS styling, like so:
transform: translateX(-50%);
border-radius: 100%;
position: absolute;
background: blue;
bottom: 2px;
height: 2px;
content: '';
width: 2px;
left: 50%;
However, when I added this code where indicated in my existing codebase, it caused distortion and movement of the date numbers within the datepicker. Or, the blue circles appeared on top of the numbers, with the numbers themselves ending up at the bottom of their respective cells instead of their usual positions.
.DayPicker-Week {
border-bottom: none;
cursor: default;
.DayPicker-Day {
text-styles('normal');
border-right: none;
cursor: default;
height: 32px;
padding: spacing-NEW(0.5);
width: 32px;
&--disabled {
color: red
}
.DayPicker-Day-NEW{
display: table-cell;
height: inherit;
vertical-align: middle;
width: inherit;
}
&--today:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside) .DayPicker-Day-NEW {
// IF TODAYS DATE
// ADD A DOT BELOW TODAYS DAY NUMBER
}
}
}