ng-bootstrap日期选择器日历图标未显示。

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>

- Boby Yadav

---

你的代码是什么，如何构建它，以及你在项目结构中放置了图像文件在哪里？ - JB Nizet

@JBNizet 我还没有放置图像文件，我只是使用HTML代码。 - Boby Yadav

<div class="form-inline col-sm-6"> <label class="col-sm-3">起始日期：</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> - Boby Yadav

请在问题中发布相关的代码，格式正确。<img src="img/calendar-icon.svg"/>：这是一个简单的HTML img标签，寻找您服务器上的calendar-icon.svg文件。如果它不在那里，怎么能显示图像呢？ - JB Nizet

谢谢...我忘记把img文件夹放在assets里了。 - Boby Yadav

Answer 1

如果您打开其中一个示例的StackBlitz，您会发现他们通过添加以下样式来获取图标：

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

然后只需要像这样使用按钮：

然后只需在按钮中使用类似以下的内容：

<button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>

- apricity

---

似乎 ng-bootstrap 的开发人员疏忽了。他们应该将 CSS 与库捆绑在一起，这样您就可以复制粘贴他们的示例代码并使其正常工作，而无需弄清楚到底发生了什么。 - Ross

Answer 2

另一个选项是使用Font Awesome图标，并将按钮标签的代码更改为以下内容-

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

- Sachin Jadhav

Answer 3

您需要使用CSS来设置图标。

来自ng-bootstrap的文档：

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

设置图标的参考：

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

- Explorer

Answer 4

我最近遇到了一个问题，我们在按钮上使用了glyphicon类，大多数情况下都可以正常使用，但是当从ng-template加载datepicker时就出现了问题。解决方法是在按钮内部使用元素，例如：

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

- Jacob Roberts