Angularjs中使用layDate日期控件示例


Posted in Javascript onJanuary 11, 2017

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);
          }
        } 
      }
    })

 ---以上代码使用示例为 <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,问题解决。解决问题的过程伴随着查资料的过程,是一步步完善的。也希望大家在遇到同样的问题时少走弯路

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript操作xml
Nov 04 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
webpack3之loader全解析
Oct 26 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
web打印小结
Jan 11 #Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 #Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 #Javascript
AngularJS中的缓存使用
Jan 11 #Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 #Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 #Javascript
JavaScript实现大图轮播效果
Jan 11 #Javascript
You might like
上传多个文件的PHP脚本
2006/11/26 PHP
基于empty函数的判断详解
2013/06/17 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
基于Python fminunc 的替代方法
2020/02/29 Python
类的核心特性有哪些
2014/01/01 面试题
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
出生证明公证书
2014/04/09 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
行为规范主题班会
2015/08/13 职场文书