用于下一个/上一个的 Angular Ngx-Bootstrap Datepicker 自定义按钮

Question

Our project is in process of updating Angular 4 to Angular 7. As part of this ng2-bootstrap was updated to ngx-bootstrap.

Bootstrap version is 3, ngx-bootstrap is 5.3.2

We are using the DatepickerModule, not the BsDatepickerModule. In ng2-bootstrap the datepicker appeared to have glyphicons built in. Now they're gone. The "Previous" and "Next" buttons used glyphicon-chevron-left and glyphicon-chevron-right. Now they simply have "<" and ">" as text.

Is there a way to set custom Previous and Next buttons in the ngx-bootstrap datepicker? Or get it to use glyphicons? (Or font awesome icons?)

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>

Update:

I've managed to accomplish this by editing styles.scss but this seems a little hacky. If there's a better way I'd love to hear it.

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

Apparently there isn't a better way to accomplish this. I edited the styles.scss to get it working:

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;
    }
  }
}