Angularjs中使用layDate日期控件示例
laydate 控件地址:
前情:原来系统中使用的日期控件是ui 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); } } } })
---以上代码使用示例为 <input def-laydate type="text" id="id1" ng-model="starttime" max-date="{{model.max}}" min-date="{{model.min}}"/> min-date,max-date属性按需添加。
这样的指令一般情况下已经可以满足使用,但是在结合ngdialog使用时出现了问题:laydate在初始化中getelementbyid 获取元素时,弹窗中的html内容还没有持到页面的结点树中,故而报错。
于是希望指令的link代码可以在弹窗渲染后再执行,查找资料后,在指令中引入了$timeout:
app.directive('ngclaydate', function($timeout) { return { require: '?ngmodel', restrict: 'a', scope: { ngmodel: '=', maxdate:'@', mindate:'@' }, link: function(scope, element, attr, ngmodel) { var _date = null,_config={}; // 渲染模板完成后执行 $timeout(function(){ // 初始化参数 _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); } },0); } }; })
ok,问题解决。解决问题的过程伴随着查资料的过程,是一步步完善的。也希望大家在遇到同样的问题时少走弯路
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
AngularJS中directive指令使用之事件绑定与指令交互用法示例
-
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
-
Angularjs中使用layDate日期控件示例
-
AngularJS中$watch和$timeout的使用示例
-
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
-
日期时间控件layDate的使用教程
-
Angularjs 1.x 中使用 layDate 日期控件
-
Angularjs 1.x 中使用 layDate 日期控件
-
AngularJS之jeDate日期控件基本使用
-
AngularJS中directive指令使用之事件绑定与指令交互用法示例