ng-Bootstrap之Datepicker使用

Angular中可以直接使用ng-Bootstrap中日期控件，
使用前的安装和配置工作：https://www.jianshu.com/p/69008093ecca

#d是input控件的id，可用来设置隐藏显示d.toggle()
ngbDatepicker是angular的ngModel

1、直接显示日历

<ngb-datepicker [displayMonths]="true" [navigation]="true" [showWeekNumbers]="true"></ngb-datepicker>

displayMonths：是否显示月选项
navigation：是否显示上一个、下一个月箭头
showWeekNumbers：是否显示第几周

image.png

2、点击按钮后出现日历

<div class="input-group date">
  <div class="input-group-addon"  (click)="d.toggle()">
    <i class="fa fa-calendar"></i>
  </div>
  <input type="text" class="form-control pull-right" name="starttime" #d="ngbDatepicker" ngbDatepicker [displayMonths]="true" [navigation]="true"
         [showWeekNumbers]="true">
<!--...#d="ngbDatepicker" ngbDatepicker...这两个ngbDatepicker都是必填。原因还不知道，猜测：前者用于绑定ngModel，后者用于标识-->
</div>

image.png

官方地址：https://ng-bootstrap.github.io/#/getting-started
网友分享：https://blog.csdn.net/u010918970/article/details/79345976/