layDate 控件地址：
1 2 3 4 5 6 app.directive('defLaydate', function() { 7 return { 8 require: '?ngModel', 9 restrict: 'A',10 scope: {11 ngModel: '='14 },15 link: function(scope, element, attr, ngModel) {16 var _date = null,_config={};17 18 // 初始化参数 19 _config = {20 elem: '#' + attr.id,21 format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD',22 max:attr.hasOwnProperty('maxDate')?attr.maxDate:'',23 min:attr.hasOwnProperty('minDate')?attr.minDate:'',24 choose: function(data) {25 scope.$apply(setViewValue);26 27 },28 clear:function(){29 ngModel.$setViewValue(null);30 }31 };32 // 初始化33 _date= laydate(_config);34 35 36 37 // 模型值同步到视图上38 ngModel.$render = function() {39 element.val(ngModel.$viewValue || '');40 };41 42 // 监听元素上的事件43 element.on('blur keyup change', function() {44 scope.$apply(setVeiwValue);45 });46 47 setVeiwValue();48 49 // 更新模型上的视图值50 function setViewValue() {51 var val = element.val();52 ngModel.$setViewValue(val);53 }54 } 55 }56 }) ---以上代码使用示例为 <input def-laydate type="text" id="id1" ng-model="startTime"/>
注意：1.指令只能用做元素属性。2.元素必须要有唯一id属性。
在Angularjs里使用laydate的基本目标实现了。但是，日期组件难免会有日期选择范围限制的要求,比如日期可选的最大值，最小值。现对指令做优化以满足要求：
1 2 app.directive('defLaydate', function() { 3 return { 4 require: '?ngModel', 5 restrict: 'A', 6 scope: { 7 ngModel: '=', 8 maxDate:'@', 9 minDate:'@'10 },11 link: function(scope, element, attr, ngModel) {12 var _date = null,_config={};13 14 // 初始化参数 15 _config = {16 elem: '#' + attr.id,17 format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD',18 max:attr.hasOwnProperty('maxDate')?attr.maxDate:'',19 min:attr.hasOwnProperty('minDate')?attr.minDate:'',20 choose: function(data) {21 scope.$apply(setViewValue);22 23 },24 clear:function(){25 ngModel.$setViewValue(null);26 }27 };28 // 初始化29 _date= laydate(_config);30 31 // 监听日期最大值32 if(attr.hasOwnProperty('maxDate')){33 attr.$observe('maxDate', function (val) {34 _config.max = val;35 })36 }37 // 监听日期最小值38 if(attr.hasOwnProperty('minDate')){39 attr.$observe('minDate', function (val) {40 _config.min = val;41 })42 }43 44 // 模型值同步到视图上45 ngModel.$render = function() {46 element.val(ngModel.$viewValue || '');47 };48 49 // 监听元素上的事件50 element.on('blur keyup change', function() {51 scope.$apply(setVeiwValue);52 });53 54 setVeiwValue();55 56 // 更新模型上的视图值57 function setVeiwValue() {58 var val = element.val();59 ngModel.$setViewValue(val);60 }61 } 62 }63 }) 以上代码使用示例为 <input def-laydate type="text" id="id1" ng-model="startTime" max-date="{
{model.max}}" min-date="{ {model.min}}"/> min-date,max-date属性按需添加。