时间戳

首页 > 解决方案 > 在使用 ngb-datepicker 制作的日期范围内向开始和结束日期添加三角箭头

css - 在使用 ngb-datepicker 制作的日期范围内向开始和结束日期添加三角箭头

问题描述

我有一个允许选择日期范围的 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 的初学者。

非常感谢任何帮助！谢谢。

标签： cssangular

解决方案

我不太了解您想如何将 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;
}

演示

推荐阅读