快捷導(dǎo)航

Angularjs中使用layDate日期控件示例

更新時間：2017年01月11日 14:52:23 作者：茜瓜

本篇文章主要介紹了Angularjs中使用layDate日期控件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前情：原來系統(tǒng)中使用的日期控件是UI bootstrap（地址：https://angular-ui.github.io/bootstrap/）里的。后來因為各種原因，要換掉UI bootstrap中的日期控件，改用layDate日期控件。

解決思路：將layDate的初始化及相關(guān)代碼定義在指令里。

問題關(guān)鍵點：layDate操作的是Html元素的,怎么實現(xiàn)雙向綁定，同步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={};
          
            // 初始化參數(shù) 
          _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 || '');
          };

          // 監(jiān)聽元素上的事件
          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的基本目標(biāo)實現(xiàn)了。但是，日期組件難免會有日期選擇范圍限制的要求,比如日期可選的最大值，最小值。現(xiàn)對指令做優(yōu)化以滿足要求：

app.directive('defLaydate', function() {
      return {
        require: '?ngModel',
        restrict: 'A',
        scope: {
          ngModel: '=',
          maxDate:'@',
          minDate:'@'
        },
        link: function(scope, element, attr, ngModel) {
          var _date = null,_config={};
          
            // 初始化參數(shù) 
          _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);
          
          // 監(jiān)聽日期最大值
          if(attr.hasOwnProperty('maxDate')){
            attr.$observe('maxDate', function (val) {
              _config.max = val;
            })
          }
          // 監(jiān)聽日期最小值
          if(attr.hasOwnProperty('minDate')){
            attr.$observe('minDate', function (val) {
              _config.min = val;
            })
          }
          
          // 模型值同步到視圖上
          ngModel.$render = function() {
            element.val(ngModel.$viewValue || '');
          };

          // 監(jiān)聽元素上的事件
          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屬性按需添加。

這樣的指令一般情況下已經(jīng)可以滿足使用，但是在結(jié)合ngDialog使用時出現(xiàn)了問題：layDate在初始化中g(shù)etElementById 獲取元素時，彈窗中的html內(nèi)容還沒有持到頁面的結(jié)點樹中，故而報錯。

于是希望指令的link代碼可以在彈窗渲染后再執(zhí)行，查找資料后，在指令中引入了$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={};
           // 渲染模板完成后執(zhí)行
          $timeout(function(){ 
            // 初始化參數(shù) 
            _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);

            // 監(jiān)聽日期最大值
            if(attr.hasOwnProperty('maxDate')){
              attr.$observe('maxDate', function (val) {
                _config.max = val;
              })
            }
            // 監(jiān)聽日期最小值
            if(attr.hasOwnProperty('minDate')){
              attr.$observe('minDate', function (val) {
                _config.min = val;
              })
            }
            
            // 模型值同步到視圖上
            ngModel.$render = function() {
              element.val(ngModel.$viewValue || '');
            };

            // 監(jiān)聽元素上的事件
            element.on('blur keyup change', function() {
              scope.$apply(setViewValue);
            });

            setViewValue();

            // 更新模型上的視圖值
            function setViewValue() {
              var val = element.val();
              ngModel.$setViewValue(val);
            }
          },0); 
        }
      };
    })

OK，問題解決。解決問題的過程伴隨著查資料的過程，是一步步完善的。也希望大家在遇到同樣的問題時少走彎路

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: