欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angularjs中使用layDate日期控件示例

程序员文章站 2022-05-24 15:51:20
laydate 控件地址: 前情:原来系统中使用的日期控件是ui bootstrap(地址:)里的。后来因为各种原因,要换掉ui bootstrap中的日期控件,改用...

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

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