ng-bootstrap - значок для указателя даты не отображается - PullRequest
Новая
       6

ng-bootstrap - значок для указателя даты не отображается

1 голос
/ 10 мая 2019

Я импортировал указатель даты точно так, как написано в документации 

  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
              name="date" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker" >
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
      </div>
    </div>
  </div>

Я вполне уверен, что следовал инструкциям по настройке.

Ответы [ 2 ]

1 голос
/ 13 мая 2019

Вам нужно поставить изображение вручную, я использую Font Awesome для этого: 

<div class="col-sm-3">
    <div class="form-group">
        <label>Date:</label>
        <div class="input-group">
            <input name="date" class="form-control" ngbDatepicker #d="ngbDatepicker" [(ngModel)]="date" required />
            <span class="input-group-append">
                <button type="button" class="btn btn-outline-secondary btn-sm" (click)="d.toggle()">
                    <i class="fas fa-calendar-alt fa-fw"></i>
                </button>
            </span>
        </div>
    </div>
</div>
0 голосов
/ 10 мая 2019

Вам также необходимо добавить указанный ниже CSS в таблицу стилей компонента или в файл index.html сразу после bootstrap.css 

button.calendar, button.calendar:active {
  width: 2.75rem;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAYAAAAEN20fAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEUSURBVEiJ7ZQxToVAEIY/YCHGxN6XGOIpnpaEsBSeQC9ArZbm9TZ6ADyBNzAhQGGl8Riv4BLAWAgmkpBYkH1b8FWT2WK/zJ8ZJ4qiI6XUI3ANnGKWBnht2/ZBDRK3hgVGNsCd7/ui+JkEIrKtqurLpEWaphd933+IyI3LEIdpCYCiKD6HcuOa/nwOa0ScJEnk0BJg0UTUWJRl6RxCYEzEmomsIlPU3IPW+grIAbquy+q6fluy/28RIBeRMwDXdXMgXLj/B2uimRXpui4D9sBeRLKl+1N+L+t6RwbWrZliTTTr1oxYtzVWiTQAcRxvTX+eJMnlUDaO1vpZRO5NS0x48sIwfPc87xg4B04MCzQi8hIEwe4bl1DnFMCN2zsAAAAASUVORK5CYII=') !important;
  background-repeat: no-repeat;
  background-size: 23px;
  background-position: center;
}

проверьте этот официальный пример в stackblitz

https://stackblitz.com/run?file=index.html

...