时间戳

首页 > 解决方案 > Angular Ngx-Bootstrap Datepicker 下一个/上一个自定义按钮

angular - Angular Ngx-Bootstrap Datepicker 下一个/上一个自定义按钮

问题描述

我们的项目正在将 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：

ng2日期选择器

ngx：

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 来实现这一点，但这似乎有点 hacky。如果有更好的方法我很想听。

样式.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;
    }
  }
}

标签： angulardatepickerngx-bootstrap

解决方案

显然没有更好的方法来实现这一点。我编辑了 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;
    }
  }
}

推荐阅读