关闭

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

标签: angulardata-bs-dchrome
3060人阅读 评论(0) 收藏 举报
分类:

在一个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
查看评论

angular2时间控件datepicker的使用

github下载地址:https://www.npmjs.com/package/angular2-simple-datepicker 使用代码: setInputDate($event)"/> <date-picker [value]="value...
  • LUOLUO68
  • LUOLUO68
  • 2016-08-09 11:23
  • 8646

在angular 下使用bootstrap 的datepicker

如果想要在angular 下使用bootstrap 的datepicker,首先需要引入必要的js和css包。然后将bootstrap 的datepicker 用directive 封装起来,代码如下: angular.module('myApp',...
  • u013544065
  • u013544065
  • 2014-03-24 09:58
  • 3188

VUE快速入门新的——组件之间传递数据(1. Prop)

晚上好大家,组件我们在上边文章中已经说过了,对大家还是有点帮助的应该。哈哈~~ 今天我们说一下关于组件之间数据是怎样传递的?不难看出,其实组件之间的数据通信,简单的可以分为三类。 父组件向子组件传递 子组件向父组件传递 平级之间的组件数据传递 之前也有说到,父组件可以通过props向下传递数据给子组...
  • baidu_38492440
  • baidu_38492440
  • 2017-07-22 23:48
  • 918

Vue组件中如何获取非Prop特性的值

Vue组件中如何获取非Prop特性的值
  • supergao222
  • supergao222
  • 2017-11-05 08:40
  • 426

angularJS扩展指令之-datepicker(整理)

angularJS扩展指令之-datepicker
  • u012609847
  • u012609847
  • 2015-01-25 17:06
  • 4427

My97DatePicker与angular一起使用时改变了但是angular无法监测到变化解决方式

第一种方式: input class="Wdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',onpicked:function(){$(this).trigger('chan...
  • m0_37890758
  • m0_37890758
  • 2017-06-09 18:24
  • 469

AngularJS 与Jquery Datepicker集成

本人因为使用angularJS开发一个小网站,网站上需要用到一个日期选择器,通过各种百度,各种尝试后发现,还是Jquery Datapicker 的使用最方便。下面来给未百度或未领悟出来的童鞋来一个教程,如何将AngularJS 与Jquery Datepicker集成,能在输入款内选择日期。 ...
  • u010379324
  • u010379324
  • 2015-07-02 18:33
  • 3131

用DatePicker和TimePicker写的选择日期时间示例

  • 2015-05-28 09:30
  • 1.49MB
  • 下载

angular-daterangepicker实例

采用angualr-daterangepicker最好将其作为常量配置到系统常量文件夹。在实际使用中只需要angular引入即可。
  • BlackSun_JAVA
  • BlackSun_JAVA
  • 2017-06-27 11:38
  • 744

angular ui-bootstrap的Datepicker Popup组件问题总结

转自:http://www.cnblogs.com/echo2016/p/5416572.html 使用angular框架的时候,之前用的时间控件是引入My97DatePicker组件实现的,但是因为 1.My97DatePicker样式不太好看以及偶尔会出现底部被遮盖的情况、点击不可编辑...
  • Inuyasha1121
  • Inuyasha1121
  • 2017-02-23 18:52
  • 4420
    个人资料
    • 访问:297827次
    • 积分:3689
    • 等级:
    • 排名:第10456名
    • 原创:70篇
    • 转载:122篇
    • 译文:0篇
    • 评论:21条
    文章分类
    最新评论