剑客
关注科技互联网

angular中使用时间控件bootstrap-datetimepicker

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

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

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

如何安装?

使用npm进行安装

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

引入js文件和css文件:

<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依赖这个模块

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

html代码

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

angular中配置日期控件

$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 这个文档中可查看。

效果如下(来自官网):

angular中使用时间控件bootstrap-datetimepicker

项目github地址:

bootstrap-datetimepicker

angular-eonasdan-datetimepicker

官网文档:

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

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址