search

valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.52k stars 1.7k forks source link

Highlight whole week in daterange picker #5539

Open manhar-developer opened 4 years ago

manhar-developer commented 4 years ago

Description: Highlight whole week in daterange picker.

Expected Result. Is it possible to select/highlight whole week in the date picker. In response we have managed to send the week from the date. But the requirement is to display/highlight the week . Suppose wednesday from week 1 to wednesday Week2 is selected. In that case date rangepicker should highlight whole weeks. i.e. Monday from Week 1 to Sunday Week 2.

Refer Stackblitz example implemented for week response https://stackblitz.com/edit/angular-7ilfcu

andersb commented 3 years ago

+1 Just found this issue which is exactly what I would need as well :)

zhandosainabek commented 2 months ago

2024 :) Does anyone know how to do it?

zhandosainabek commented 2 months ago

Ok, maybe it will help someone. I wrote some SCSS in global styles.scss file of Angular to achive the result:

.bs-datepicker-body tr {
  &:hover, &:has(span.selected) {
    background-color: red;
  }
}

So, basically I just check if tr has span.selected element or user hovers on it. If yes, I apply styles on tr row element.