[实现] angular的directive + laydate 实现日期选择器

[实现] angular的directive + laydate 实现日期选择器

因为最近anguar项目里大量用到日期选择器，每次调用都要初始的话显得麻烦，而且代码很冗余
所以就用angular的directive 来封装下laydate ，调用的时候就很方便了。代码如下：

首先先介绍下laydate

官方首页

全部参数

{
  elem: '#id', //需显示日期的元素选择器
  event: 'click', //触发事件
  format: 'YYYY-MM-DD hh:mm:ss', //日期格式
  istime: false, //是否开启时间选择
  isclear: true, //是否显示清空
  istoday: true, //是否显示今天
  issure: true, 是否显示确认
  festival: true //是否显示节日
  min: '1900-01-01 00:00:00', //最小日期
  max: '2099-12-31 23:59:59', //最大日期
  start: '2014-6-15 23:00:00',  //开始日期
  fixed: false, //是否固定在可视区域
  zIndex: 99999999, //css z-index
  choose: function(dates){ //选择好日期的回调
 
  }
}
// 其中 istime,isclear,istoday,issure都使用默认值，要控制的话等需求扩展

HTML部分

    
    至
    

js部分

var ngDate = angular.module('myApp', []);

    ngDate.directive('ngcMyDate', function() {
        return {
            restrict: 'A',
            require: '?ngModel',
            scope: {
                ngModel: '=',
                maxDate: '@',
                minDate: '@'
            },
            link: function(scope, element, attr, ngModel) {
                var _date = null,
                    _config = {};

                if (!attr.id) {
                    element.attr('id', '_laydate' + (Date.now()));
                }
                
                // 日期配置参数
                _config = {
                    elem: '#' + element.attr('id'),
                    format: attr.hasOwnProperty('format') && attr.format ? attr.format : 'YYYY-MM-DD',
                    min: attr.hasOwnProperty('minDate') && attr.minDate ? attr.minDate : '',
                    max: attr.hasOwnProperty('maxDate') && attr.maxDate ? attr.maxDate : '',
                    choose: function(data) {
                        scope.$apply(setDateVal);
                    },
                    clear: function() {
                        ngModel.$setViewValue(null);
                    }
                };
                // 初始化日期
                _date = laydate(_config);

                // 监听 maxDate 变化
                if (attr.hasOwnProperty('maxDate')) {
                    attr.$observe('maxDate', function(val) {
                        _config.max = val;
                    })
                }
                // 监听 minDate 变化
                if (attr.hasOwnProperty('minDate')) {
                    attr.$observe('minDate', function(val) {
                        _config.min = val;
                    })
                }

                // 监听输入框 时刻同步 $viewValue 和 DOM节点的value
                ngModel.$render = function() {
                    element.val(ngModel.$viewValue || '');
                };

                // 监听输入框 时刻同步 $viewValue 和 DOM节点的value
                element.on('blur keyup change', function() {
                    scope.$apply(setDateVal);
                });

                setDateVal();

                // 同步 DOM节点的value 到 $viewValue 
                function setDateVal() {
                    var val = element.val();
                    ngModel.$setViewValue(val);
                }
            }
        }
    })