Question

我正在使用angular-cli和ng-bootstrap作为日期选择器。从npm安装datepicker并将其添加到主模块后，datepicker正在工作，但是图标没有显示。

<div class="form-inline col-sm-6"> 
   <label class="col-sm-3">From:</label> 
   <div class="input-group"> 
      <input 
             class="form-control" 
             placeholder="yyyy-mm-dd" name="dp" 
             [(ngModel)]="model" 
              ngbDatepicker 
             #d="ngbDatepicker"> 
            <button 
                 class="input-group-addon" 
                 (click)="d.toggle()" 
                  type="button"> 
                   <img 
                        src="img/calendar-icon.svg" 
                        style="width: 1.2rem; height: 1rem; cursor: pointer;"/> 
           </button> 
  </div> 
</div>

Answer 1

您可以使用font awesome icons并将按钮标签的代码更改为下面的另一个选项-

<div class="input-group-append">
     <button class="btn btn-outline-secondary calendar fa fa-calendar" (click)="d.toggle()" type="button"></button>
</div>

Answer 2

如果您为其中的一个示例打开stackblitz，则可以看到他们通过添加以下样式获得了图标：

props: ['carModels'],
data(){
   return {
      models:this.carModels
   }
},
watch:{    
        carModels(){
            this.models= this.carModels;
        }    
    }

然后仅对按钮使用以下内容：

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

Answer 3

我刚遇到这个问题，我们在按钮上有glyphicon类。这适用于大多数用例，但从ng-template加载datepicker时除外。解决方法是在按钮内部使用<i>元素，例如：

<button (click)="toggleDatePicker($event)" type="button"><i class="glyphicon glyphicon-calendar"></i></button>

代替：

<button tabindex="-1" (click)="toggleDatePicker($event)" type="button" class="glyphicon glyphicon-calendar"></button>

Answer 4

您必须使用css作为图标。

ng-bootstrap的文档：

您必须提供按钮的图标。这使您可以选择与您的应用程序样式匹配的图标。在此示例中，图标是通过CSS类设置的。

设置图标参考

https://www.w3schools.com/icons/fontawesome5_icons_datetime.asp

ng-bootstrap datepicker日历图标未显示

4 个答案: