用於下一個/上一個的 Angular Ngx-Bootstrap Datepicker 自定義按鈕

Question

我們的項目正在將 Angular 4 更新為 Angular 7。作為此 ng2-bootstrap 的一部分，已更新為 ngx-bootstrap。

Bootstrap 版本是 3，ngx-bootstrap 是 5.3.2

我們使用的是 DatepickerModule，而不是BsDatepickerModule。 在 ng2-bootstrap 中，日期選擇器似乎內置了字形。現在它們不見了。 “上一個”和“下一個”按鈕使用了 glyphicon-chevron-left 和 glyphicon-chevron-right。 現在他們只是將“<”和“>”作為文本。

有沒有辦法在 ngx-bootstrap 日期選擇器中設置自定義上一個和下一個按鈕？ 或者讓它使用字形？ （或字體真棒圖標？）

ng2：

ngx：

.html：

<div style="float:left;" [ngStyle]="{'opacity': disabled ? '0.5' : '1'}">
    <div class="input-group">
        <input #endDateRef type="text" [disabled]="disabled" [class.has-error]="!endDateValid"
               placeholder="mm/dd/yyyy" maxlength="10" [ngStyle]="{'font-size' : !endDate ? '14px' : '15px'}"
               (keyup)="onEndDateKeyup()" (keyup.enter)="$event.target.blur()"
               (focus)="close()" (blur)="onExitDateInput('end')" class="{{small ? 'small' : ''}}">
        <span class="input-group-addon datepicker {{small ? 'small-icon' : ''}}" [class.has-error]="!endDateValid">
                <span class="glyphicon glyphicon-calendar" (click)="!disabled && (showEndPicker = !showEndPicker); showStartPicker = false"></span>
            </span>
    </div>
    <div *ngIf="showEndPicker"
         style="position: absolute; z-index:10; min-height:290px;">
        <datepicker [(ngModel)]="endDate"
                    [minDate]="minDate"
                    [maxDate]="maxDate"
                    (selectionDone)="datePicked('end')"
                    [showWeeks]="false">
        </datepicker>
    </div>
</div>

更新：

我已經通過編輯styles.scss 設法實現了這一點，但這似乎有點笨拙。 如果有更好的方法，我很想聽聽。

樣式.scss：

daypicker > table > thead > tr > th {
  .pull-left {
    font-family: 'Glyphicons Halflings';
    font-size: 0px;
    &::before {
      content: "\E079";
      font-style: normal;
      font-size: 16px;
      font-weight: 400;
      line-height: 1;
      display: inline-block;
      position: relative;
      top: 1px;
      box-sizing: border-box;
    }
    &::after {
      box-sizing: border-box;
    }
  }

  .pull-right {
    font-family: 'Glyphicons Halflings';
    font-size: 0px;
    &::before {
      content: "\E080";
      font-style: normal;
      font-size: 16px;
      font-weight: 400;
      line-height: 1;
      display: inline-block;
      position: relative;
      top: 1px;
      box-sizing: border-box;
    }
    &::after {
      box-sizing: border-box;
    }
  }
}

Answer 1

顯然沒有更好的方法來實現這一點。 我編輯了 style.scss 以使其正常工作：

daypicker > table > thead > tr > th {
  .pull-left {
    font-family: 'Glyphicons Halflings';
    font-size: 0px;
    &::before {
      content: "\E079";
      font-style: normal;
      font-size: 16px;
      font-weight: 400;
      line-height: 1;
      display: inline-block;
      position: relative;
      top: 1px;
      box-sizing: border-box;
    }
    &::after {
      box-sizing: border-box;
    }
  }

  .pull-right {
    font-family: 'Glyphicons Halflings';
    font-size: 0px;
    &::before {
      content: "\E080";
      font-style: normal;
      font-size: 16px;
      font-weight: 400;
      line-height: 1;
      display: inline-block;
      position: relative;
      top: 1px;
      box-sizing: border-box;
    }
    &::after {
      box-sizing: border-box;
    }
  }
}