Angular Ngx- Bootstrap Пользовательские кнопки Datepicker для следующего / предыдущего - PullRequest
Новая
       51

Angular Ngx- Bootstrap Пользовательские кнопки Datepicker для следующего / предыдущего

0 голосов
/ 20 февраля 2020

Наш проект находится в процессе обновления Angular 4 до Angular 7. В рамках этого ng2- bootstrap был обновлен до ngx- bootstrap.

Bootstrap версия 3 ngx- bootstrap равно 5.3.2

Мы используем модуль Datepicker, не модуль BsDatepickerModule. В ng2- bootstrap в сборщике даты появились встроенные глифы. Теперь их нет. Кнопки «Предыдущий» и «Следующий» использовали glyphicon-chevron-left и glyphicon-chevron-right. Теперь они просто имеют «<» и «>» в ​​качестве текста.

Есть ли способ установить пользовательские кнопки «Предыдущий» и «Следующий» в указателе даты ngx- bootstrap? Или заставить его использовать глифы? (Или шрифт удивительные значки?)

ng2:

ng2Datepicker

ngx:

ngxDatepicker

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

Обновление:

Мне удалось выполнить sh, отредактировав стили.s css, но это кажется немного хакерским. Если бы был лучший способ, я бы хотел это услышать.

styles.s css: 

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

1 Ответ

0 голосов
/ 26 марта 2020

Очевидно, что нет лучшего способа сделать это sh. Я отредактировал стили.s css, чтобы заставить его работать: 

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