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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 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 post换行的方法
2020/02/03 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
js word表格动态添加代码
2010/06/07 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
javascript几个易错点记录
2014/11/26 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
Python进程通信之匿名管道实例讲解
2015/04/11 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
浅谈python中set使用
2016/06/30 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python列表推导式实现代码实例
2020/09/09 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
python操作toml文件的示例代码
2020/11/27 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
餐厅考勤管理制度
2014/01/28 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
安全责任协议书范本
2016/03/23 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python