在一個angularJS的web前端的項目中，使用了angular-strap提供的UI子組件。 其中使用了datepicker組件。由于采用的css框架使用了bootstrap，又有semantic，導致了沖突，使得datepicker中的title中的顯示一直有些問題。 在windows + chrome顯示在title部分長度不夠，只能顯示一個table col的大小寬度。而在mac和windows IE11中顯示都正常。

下面的[data-]bs-datepicker就是angular-strap封裝的bootstrap的datepicker組件。在瀏覽器中已經無法inspect element了。

<input type="text" id="targetDateTimeToInput" placeholder="To" title="Target Date To" name="targetDateTimeTo" data-ng-model="condition.targetDateTimeTo" data-bs-datepicker>

從angular-strap的github工程中查看該組件的template如下：

<div class="dropdown-menu datepicker" ng-class="'datepicker-mode-' + $mode" style="max-width: 320px;"> <table style="table-layout: fixed; height: 100%; width: 100%;"><thead><tr class="text-center"><th><button tabindex="-1" type="button" class="btn btn-default pull-left" ng-click="$selectPane(-1)"><i class="{{$iconLeft}}"></i></button></th><th colspan="{{ rows[0].length - 2 }}"><button tabindex="-1" type="button" class="btn btn-default btn-block text-strong" ng-click="$toggleMode()"><strong style="text-transform: capitalize;" ng-bind="title"></strong></button></th><th><button tabindex="-1" type="button" class="btn btn-default pull-right" ng-click="$selectPane(+1)"><i class="{{$iconRight}}"></i></button></th></tr><tr ng-show="showLabels" ng-bind-html="labels"></tr></thead><tbody><tr ng-repeat="(i, row) in rows" height="{{ 100 / rows.length }}%"><td class="text-center" ng-repeat="(j, el) in row"><button tabindex="-1" type="button" class="btn btn-default" style="width: 100%" ng-class="{'btn-primary': el.selected, 'btn-info btn-today': el.isToday && !el.selected}" ng-click="$select(el.date)" ng-disabled="el.disabled"><span ng-class="{'text-muted': el.muted}" ng-bind="el.label"></span></button></td></tr></tbody> </table> </div>

執行時，其中的rows[0]是第一個星期的天數，rows[n].length === 7.

準對問題，修改對應部分的css樣式。

section #filterForm .field .datepicker table th button.btn-block {width:auto;margin: 0 auto; }

其中的 .datepicker table th button.btn-block 就是獲取datepicker組件中出問題的元素。

總結

以上是生活随笔為你收集整理的angular 使用data-bs-datepicker时的一个小问题及解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。