Log in to AnswerLog in to Follow
UserImage.jpg
Rifaldi Adrian
23Views
4Comments
Solved
how to make title (tooltip) button in date picker
Question
UI
Beginner
Reactive
Front-end

Hello,
I want to display information on date picker when it is highlighted. can you help me to display it like the following picture.

Untitled.png

0
0
19 Apr

Replying to Rifaldi Adrian's comment on 20 Apr 2022 03:46:05

Hello ,

You can apply this CSS:

.is-selected .pika-button {

background: var(--color-blue-lightest);

border-radius: var(--border-radius-circle);

color: var(--color-red);


}

Hope it helps.

Best Regards,

Nuno R

See solution in context
0
0
20 Apr

Hello Rifaldi Adrian,

Do you want that the date picker look exactly as the one on the attached image? If yes there is a lot of work in CSS to do, but is possible.

If you want just to change the CSS from the current day, you can use this code:

.is-today .pika-button {
    background-color: transparent;
    border: var(--border-size-s) dashed var(--color-red);
    border-radius: var(--border-radius-circle);
}

Check this link to see the result:

https://personal-gxzlvs5j.outsystemscloud.com/DatepickerTest/

Hope it helps,

Nuno Rodrigues

1
0
19 Apr

Great Work, big thanks Nuno Rodrigues!


then, I also want to display holiday information (wafat isa al masih) in a box like the picture above. 

0
0
20 Apr

Replying to Rifaldi Adrian's comment on 20 Apr 2022 03:46:05

Hello ,

You can apply this CSS:

.is-selected .pika-button {

background: var(--color-blue-lightest);

border-radius: var(--border-radius-circle);

color: var(--color-red);


}

Hope it helps.

Best Regards,

Nuno R

0
0
20 Apr
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.