Angularjs: 封装layDate指令

【摘要】由于业务需要，将bootstrap-datetimepicker改成了layDate. layDate是一个较成熟且便于操作的jQuery日期插件，支持同一个视图内范围选择。封装成一个指令在多处调用。

.directive('defLaydate', function() { 　　return { 　　　　require: '?ngModel', 　　　　restrict: 'A', 　　　　scope: { 　　　　　　ngModel: '=',　　 　　　　}, 　　　　link: function(scope, element, attr, ngModel) { 　　　　　　var _date = null,_config={}; 　　　　　　// 初始化参数（具体参数可以查看API:http://www.layui.com/doc/modules/laydate.html）
　　　　　　_config = { 　　　　　　　　lang: 'en', 　　　　　　　　elem: element[0], 　　　　　　　　btns:['confirm'], 　　　　　　　　format: !!attr.format ? attr.format : 'yyyy-MM-dd', 　　　　　　　　range: attr.range, 　　　　　　　　done: function(value, date, endDate) { 　　　　　　　　　　ngModel.$setViewValue(value); 　　　　　　　　} 　　　　　　}; 　　　　　　!!attr.typeDate && (_config.type = attr.typeDate); 　　　　　　// 初始化
　　　　　　 _date = laydate.render(_config); 　　　　　　// 模型值同步到视图上
　　　　　　ngModel.$render = function() { 　　　　　　　　element.val(ngModel.$viewValue || ''); 　　　　　　}; 　　　　} 　　} })

HTML:

<div class="form-group">
    <label>Time</label>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-calendar icon"></i></span>
        <input def-laydate range="~" class="form-control" type="text" ng-model="dateText"/>
    </div>
</div> 

 

结果如下：