angular 使用data-bs-datepicker时的一个小问题及解决

来源：互联网发布：酷比魔方和台电知乎编辑：程序博客网时间：2024/05/17 22:46

在一个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组件中出问题的元素。

0 0