Adding dot below current date in react datepicker using CSS

Question

I want to add 1 small circle / filled dot below today date number, e.g if today is 1st of march then in the datepicker below the number 1 there should be a dot on the datepicker.

I have tried adding css styling like,

  transform: translateX(-50%);
  border-radius: 100%;
  position: absolute;
  background: blue;
  bottom: 2px;
  height: 2px;
  content: '';
  width: 2px;
  left: 50%;

To the code below where the comments are but what happens is the number itself in the datepicker gets distored and moved around, or the blue circles appears ontop of the number with the number itself appearing on the bottom of the datepicker instead of its cell

.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
            }
        }
}

OnePiece · Accepted Answer · 2022-03-21 16:55:38Z

0

        &::before{
            transform: translateX(-50%);
            border-radius: 100%;
            position: absolute;
            background: rgb(44, 6, 211);
            content: '';
            height: 5px;
            width: 5px;
            left: 50%;

            bottom: 60%;

        }

That fixed it for me ! Be sure to set parent component positioning to relative

edited Mar 21, 2022 at 16:55

answered Mar 2, 2022 at 15:56

OnePiece

5592 gold badges8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding dot below current date in react datepicker using CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related