Angular Ngx-Bootstrap Next/Previous 的日期选择器自定义按钮

Question

我们的项目正在将 Angular 4 更新为 Angular 7。作为此 ng2-bootstrap 的一部分已更新为 ngx-bootstrap.

Bootstrap版本为3，ngx-bootstrap为5.3.2

我们使用的是 DatepickerModule，不是 BsDatepickerModule。在 ng2-bootstrap 中，日期选择器似乎内置了字形图标。现在它们不见了。 "Previous" 和 "Next" 按钮使用了 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 设法完成了此操作，但这似乎有点老套。如果有更好的方法，我很想听听。

styles.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

显然没有更好的方法来完成此任务。我编辑了 styles.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;
    }
  }
}

Angular Ngx-Bootstrap Next/Previous 的日期选择器自定义按钮

Angular Ngx-Bootstrap Datepicker Custom Buttons for Next/Previous

datepicker

ngx-bootstrap

angular