公司网站以前用的是原生的时间控件，用起来用户体验并不好，然后把这个就给我当专属bug了。

于是，前几天我专门在github上找相关的控件，找了几个，终于找到了一个满意的控件bootstrap-datetimepicker，推荐给大家。

不过它不是angular控件，所以还需要另外的封装，找到了angular-enoasdan-datetimepicker这个，这里我就简单总结下继承和使用。

如何安装？

使用npm进行安装

1
2
$ npm install --save eonasdan-bootstrap-datetimepicker
$ npm install angular-eonasdan-datetimepicker --save

引入js文件和css文件：

1
2
3
4
5
<script src="../node_modules/moment/min/moment.min.js"></script>
<script src="../node_modules/moment/min/locales.min.js"></script>
<script src="../node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">
<script src="../node_modules/angular-eonasdan-datetimepicker/dist/angular-eonasdan-datetimepicker.min.js"></script>

如何使用？

让app依赖这个模块

1
var salesApp = angular.module("salesApp", ['ae-datetimepicker']);

html代码

1
<input type="text" class="form-control" datetimepicker ng-model="editingFile.effect_time" options="dateOptions">

angular中配置日期控件

1
2
3
4
5
6
$scope.dateOptions = {
          locale: 'zh-cn',
          format: 'L',
          showClose: true,
          keepOpen: false
      };

需要注意的是zh-cn是配置中文；format是配置日期格式，当日期格式是L时，会点击一下，自动隐藏日期弹框，用法来源于：
How to close DateTimePicker after date is picker这个链接，整个控件配置的选项在http://eonasdan.github.io/bootstrap-datetimepicker/Options/#format这个文档中可查看。

效果如下（来自官网）：
DateTimePicker

项目github地址：

bootstrap-datetimepicker

angular-eonasdan-datetimepicker

官网文档：

http://eonasdan.github.io/bootstrap-datetimepicker/Installing/