Angular中可以直接使用ng-Bootstrap中日期控件鞋既,
使用前的安裝和配置工作:http://www.reibang.com/p/69008093ecca
#d是input控件的id晴玖,可用來(lái)設(shè)置隱藏顯示d.toggle()
ngbDatepicker是angular的ngModel
1矛洞、直接顯示日歷
<ngb-datepicker [displayMonths]="true" [navigation]="true" [showWeekNumbers]="true"></ngb-datepicker>
displayMonths:是否顯示月選項(xiàng)
navigation:是否顯示上一個(gè)、下一個(gè)月箭頭
showWeekNumbers:是否顯示第幾周
2酸茴、點(diǎn)擊按鈕后出現(xiàn)日歷
<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...這兩個(gè)ngbDatepicker都是必填。原因還不知道兢交,猜測(cè):前者用于綁定ngModel薪捍,后者用于標(biāo)識(shí)-->
</div>
官方地址:https://ng-bootstrap.github.io/#/getting-started
網(wǎng)友分享:https://blog.csdn.net/u010918970/article/details/79345976/