Добавление треугольной стрелки к датам начала и окончания в диапазоне дат, выполненном с помощью ngb-datepicker

Question

У меня есть элемент диапазона дат / календаря ngb-datepicker, который позволяет выбрать диапазон дат.

Даты «от» и «до» имеют темно-синий фон с использованием этого селектора CSS: .custom-day.range. Я бы хотел, чтобы у даты «от» была треугольная стрелка, указывающая вперед (справа), и у даты «до» с треугольной стрелкой, указывающей назад (влево). В идеале две стрелки должны быть прикреплены к соответствующим сторонам выбранных блоков и перекрывать даты, к которым они рядом (но не перекрывать белый текст).

Вот небольшой макет того, что я собираюсь сделать (извинения за мои ужасные художественные навыки):

Вот весь мой код в Stackblitz (я добавил два элемента со стрелками под фактическим календарем, возможно, это будет полезно): https://stackblitz.com/edit/angular-vypphf-goekc2

Я пытался использовать ::after, чтобы добавить треугольный элемент без удачи.

Если бы это был не Angular, я бы просто добавил дочерний элемент к двум датам с треугольником ... но я не очень хорошо разбираюсь в рамках - я все еще учусь.

Шаблон:

    <ng-template #t let-date let-focused="focused">
      <span class="custom-day"
      [class.checkDay]="isCheckDate(date)"
      [class.focused]="focused"
      [class.range]="isRange(date)"
      [class.faded]="isHovered(date) || isInside(date)"
      (mouseenter)="hoveredDate = date"
      (mouseleave)="hoveredDate = null">
        {{ date.day }}
      </span>
    </ng-template>

    <div class="arrow-right"></div>
    <div class="arrow-left"></div>

Применимо CSS:

    /* HERE IS WHERE I WOULD LIKE TO HAVE ARROW */
    .custom-day.range, .custom-day:hover {
      background-color: rgb(2, 117, 216);
      color: white; 
    }

    .arrow-right {
      width: 0; 
      height: 0; 
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 10px solid rgb(2, 117, 216);
    }

    .arrow-left {
      width: 0; 
      height: 0; 
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 10px solid rgb(2, 117, 216);
    }

Так что я думаю, что, возможно, это можно сделать с помощью CSS, или, может быть, это можно сделать, добавив div с .arrow-right и .arrow-left к элементам начальной и конечной даты динамически ... но я попытался и не смог этого сделать, но опять же я новичок, когда речь заходит об Angular.

Любая помощь будет очень признательна! Спасибо.

Answer 1

Я не знаю много о том, как вы хотите применить CSS к элементам, но вы можете сделать что-то вроде этого

  [class.firstDate]="isInsideFirst(date)"
  [class.lastDate]="isInsideLast(date)"

Создание 2 функций, которые будут применять CSS к первому и последнему элементу

  isInsideFirst(date: NgbDate) {
    return date.equals(this.fromDate) ;

  }

  isInsideLast(date: NgbDate) {
    return date.equals(this.toDate);
  }

Теперь у вас есть первый и последний классы элементов, так что вы можете использовать css для рисования стрелки.

как то так

.firstDate::after{
     content: '\25ba';
    padding-left: -0.5em;
    background-color: rgb(2, 117, 216);       
    padding: 0.1rem 0.25rem;
    position: absolute;
}


.lastDate::before{
     content: '\25c4';        
    background-color: rgb(2, 117, 216);        
    padding: 0.185rem 0.25rem;
    position: absolute;
}

Демо