脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularjs laydate

Angularjs中使用layDate日期控件示例

 更新时间：2017年01月11日 14:52:23   作者：茜瓜  
本篇文章主要介绍了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);
          }
        } 
      }
    })

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • RequireJS 依赖关系的实例(推荐)

    RequireJS 依赖关系的实例(推荐)

    下面小编就为大家带来一篇RequireJS 依赖关系的实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • angular6的table组件开发的实现示例

    angular6的table组件开发的实现示例

    这篇文章主要介绍了angular6的table组件开发的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Angular6笔记之封装http的示例代码

    Angular6笔记之封装http的示例代码

    这篇文章主要介绍了Angular6笔记之封装http的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 详解angularjs中的隔离作用域理解以及绑定策略

    详解angularjs中的隔离作用域理解以及绑定策略

    本篇文章主要介绍了详解angularjs中的隔离作用域理解以及绑定策略，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • AngularJS入门知识之MVW类框架的编程思想探讨

    AngularJS入门知识之MVW类框架的编程思想探讨

    这篇文章主要介绍了AngularJS入门知识之MVW类框架的编程思想探讨,本文通过实现两个简单的业务需求,探讨AngularJS和传统的JavaScript控制DOM实现方式的差别,并尝试理解MVW此类框架在流行的Web前端开发中的编程思想,需要的朋友可以参考下
    2014-12-12
  • Angularjs全局变量被作用域监听的正确姿势

    Angularjs全局变量被作用域监听的正确姿势

    这篇文章主要介绍了Angularjs全局变量被作用域监听的正确姿势的相关资料,需要的朋友可以参考下
    2016-02-02
  • 使用Raygun来自动追踪AngularJS中的异常

    使用Raygun来自动追踪AngularJS中的异常

    这篇文章主要介绍了使用Raygun来自动追踪AngularJS中的异常,AngularJS是一款高人气的JavaScript库,需要的朋友可以参考下
    2015-06-06
  • Angular和百度地图的结合实例代码

    Angular和百度地图的结合实例代码

    最近在angular的项目，但是我用直接引用百度地图的方法引进js,写html,js代码，发现报错，接下来通过本文给大家介绍angular和百度地图的结合,需要的朋友可以参考下
    2016-10-10
  • Angular指令之restict匹配模式的详解

    Angular指令之restict匹配模式的详解

    这篇文章主要介绍了Angular指令之restict匹配模式的详解的相关资料,这里对Angularjs 中restict匹配模式进行详解并列举了四种模式进行比较，需要的朋友可以参考下
    2017-07-07
  • 浅谈angularJS的$watch失效问题的解决方案

    浅谈angularJS的$watch失效问题的解决方案

    本篇文章主要介绍了浅谈angularJS的$watch失效问题的解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-08-08

最新评论