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

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

# angularjs  # laydate  # 日期控件  # laydate日期控件  # layDate插件设置开始和结束时间  # layDate日期控件使用方法详解  # laydate时间日历插件使用方法详解  # vue使用laydate时间插件的方法  # 详解easyui基于 layui.laydate日期扩展组件  # 关于laydate.js加载laydate.css路径错误问题解决  # Angular4.0中引入laydate.js日期插件的方法教程  # laydate日历控件使用方法详解  # laydate 显示结束时间不小于开始时间的实例  # Bootstrap.css与layDate日期选择样式起冲突的解决办法  # laydate.js日期时间选择插件  # bootstrap laydate日期组件使用详解  # Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法  # laydate如何根据开始时间或者结束时间限制范围  # 最小值  # 的是  # 还没有  # 会有  # 要有  # 走弯路  # 希望大家  # 解决问题  # 可选  # 到此为止  # 报错  # 只能用  # 绑定  # 大家多多  # 换掉  # 按需  # 出现了  # 实现了  # 完成后  # 窗中 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  奇安信“盘古石”团队突破 iOS 26.1 提权  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  如何快速生成高效建站系统源代码？  如何在阿里云部署织梦网站？  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  iOS中将个别页面强制横屏其他页面竖屏  Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询  如何在浏览器中启用Flash_2025年继续使用Flash Player的方法【过时】  网站图片在线制作软件,怎么在图片上做链接？  英语简历制作免费网站推荐,如何将简历翻译成英文？  如何快速查询域名建站关键信息？  如何在建站主机中优化服务器配置？  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  香港服务器WordPress建站指南：SEO优化与高效部署策略  企业网站制作这些问题要关注  Laravel如何使用Vite进行前端资源打包？（配置示例）  Python自动化办公教程_ExcelWordPDF批量处理案例  使用豆包 AI 辅助进行简单网页 HTML 结构设计  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  太平洋网站制作公司,网络用语太平洋是什么意思？  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  百度浏览器ai对话怎么关 百度浏览器ai聊天窗口隐藏  Laravel如何使用Gate和Policy进行授权？（权限控制）  制作电商网页,电商供应链怎么做？  Laravel如何使用集合（Collections）进行数据处理_Laravel Collection常用方法与技巧  Python文件操作最佳实践_稳定性说明【指导】  详解MySQL数据库的安装与密码配置  Laravel如何正确地在控制器和模型之间分配逻辑_Laravel代码职责分离与架构建议  Laravel如何创建自定义Artisan命令？（代码示例）  详解Android图表 MPAndroidChart折线图  如何在云主机上快速搭建网站？  详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南  如何在阿里云通过域名搭建网站？  香港服务器选型指南：免备案配置与高效建站方案解析  微博html5版本怎么弄发语音微博_语音录制入口及时长限制操作【教程】  Laravel怎么为数据库表字段添加索引以优化查询  无锡营销型网站制作公司,无锡网选车牌流程？  如何撰写建站申请书？关键要点有哪些？  javascript中对象的定义、使用以及对象和原型链操作小结  Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置  海南网站制作公司有哪些,海口网是哪家的？  Laravel Sail是什么_基于Docker的Laravel本地开发环境Sail入门  Linux安全能力提升路径_长期防护思维说明【指导】  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  在线教育网站制作平台,山西立德教育官网？  JavaScript模板引擎Template.js使用详解  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法