Angularjs中使用layDate日期控件示例

layDate 控件地址：http://laydate.layui.com/

前情：原来系统中使用的日期控件是UI bootstrap（地址：https://angular-ui.github.io/bootstrap/）里的。后来因为各种原因，要换掉UI bootstrap中的日期控件，改用layDate日期控件。

解决思路：将layDate的初始化及相关代码定义在指令里。

问题关键点：layDate操作的是Html元素的,怎么实现双向绑定，同步Angularjs模板值和Html的元素值。

指令具体代码:

/**     * 使用示例     * <input def-laydate type="text" id="id1" ng-model="startTime"/>     */    app    .directive('defLaydate', function() {      return {        require: '?ngModel',        restrict: 'A',        scope: {          ngModel: '='        },        link: function(scope, element, attr, ngModel) {          var _date = null,_config={};                      // 初始化参数           _config = {            elem: '#' + attr.id,            format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD',            max:attr.hasOwnProperty('maxDate')?attr.maxDate:'',            min:attr.hasOwnProperty('minDate')?attr.minDate:'',            choose: function(data) {              scope.$apply(setViewValue);                          },            clear:function(){              ngModel.$setViewValue(null);            }          };          // 初始化          _date= laydate(_config);                             // 模型值同步到视图上          ngModel.$render = function() {            element.val(ngModel.$viewValue || '');          };          // 监听元素上的事件          element.on('blur keyup change', function() {            scope.$apply(setViewValue);          });          setViewValue();          // 更新模型上的视图值          function setViewValue() {            var val = element.val();            ngModel.$setViewValue(val);          }        }       }    })

---以上代码使用示例为 <input def-laydate type="text" id="id1" ng-model="startTime"/>

注意：1.指令只能用做元素属性。2.元素必须要有唯一id属性。

 到此为止，在Angularjs里使用laydate的基本目标实现了。但是，日期组件难免会有日期选择范围限制的要求,比如日期可选的最大值，最小值。现对指令做优化以满足要求：

app.directive('defLaydate', function() {      return {        require: '?ngModel',        restrict: 'A',        scope: {          ngModel: '=',          maxDate:'@',          minDate:'@'        },        link: function(scope, element, attr, ngModel) {          var _date = null,_config={};                      // 初始化参数           _config = {            elem: '#' + attr.id,            format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD',            max:attr.hasOwnProperty('maxDate')?attr.maxDate:'',            min:attr.hasOwnProperty('minDate')?attr.minDate:'',            choose: function(data) {              scope.$apply(setViewValue);                          },            clear:function(){              ngModel.$setViewValue(null);            }          };          // 初始化          _date= laydate(_config);                    // 监听日期最大值          if(attr.hasOwnProperty('maxDate')){            attr.$observe('maxDate', function (val) {              _config.max = val;            })          }          // 监听日期最小值          if(attr.hasOwnProperty('minDate')){            attr.$observe('minDate', function (val) {              _config.min = val;            })          }                    // 模型值同步到视图上          ngModel.$render = function() {            element.val(ngModel.$viewValue || '');          };          // 监听元素上的事件          element.on('blur keyup change', function() {            scope.$apply(setViewValue);          });          setViewValue();          // 更新模型上的视图值          function setViewValue() {            var val = element.val();            ngModel.$setViewValue(val);          }        }       }    })