Example of using layDate date control in Angularjs

layDate control address: http://laydate.layui.com/

Previously: The date control used in the original system was in UI bootstrap (address: https://angular-ui.github.io/bootstrap/). Later, for various reasons, the date control in UI bootstrap was replaced by layDate date control.

Solution: The initialization of layDate and related codes are defined in instructions.

Key point of the problem: layDate operation is Html element, how to achieve bidirectional binding, synchronous Angularjs template value and Html element value.

Specific code of instruction:

/**
     *  Use sample 
     * <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={};
          
            //  Initialization parameter  
          _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);
            }
          };
          //  Initialization 
          _date= laydate(_config);

         
          
          //  Synchronize model values to views 
          ngModel.$render = function() {
            element.val(ngModel.$viewValue || '');
          };

          //  Listening for Events on Elements 
          element.on('blur keyup change', function() {
            scope.$apply(setViewValue);
          });

          setViewValue();

          //  Update view values on the model 
          function setViewValue() {
            var val = element.val();
            ngModel.$setViewValue(val);
          }
        } 
      }
    })

---The above code use example is < input def-laydate type="text" id="id1" ng-model="startTime"/ >

Note: 1. Instructions can only be used as element attributes. 2. The element must have a 1id-only attribute.

So far, the basic goal of using laydate in Angularjs has been achieved. However, the date component will inevitably have the requirement of limiting the range of date selection, such as the maximum and minimum value of date selection. Now optimize the instructions to meet the requirements:

app.directive('defLaydate', function() {
      return {
        require: '?ngModel',
        restrict: 'A',
        scope: {
          ngModel: '=',
          maxDate:'@',
          minDate:'@'
        },
        link: function(scope, element, attr, ngModel) {
          var _date = null,_config={};
          
            //  Initialization parameter  
          _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);
            }
          };
          //  Initialization 
          _date= laydate(_config);
          
          //  Maximum listening date 
          if(attr.hasOwnProperty('maxDate')){
            attr.$observe('maxDate', function (val) {
              _config.max = val;
            })
          }
          //  Minimum listening date 
          if(attr.hasOwnProperty('minDate')){
            attr.$observe('minDate', function (val) {
              _config.min = val;
            })
          }
          
          //  Synchronize model values to views 
          ngModel.$render = function() {
            element.val(ngModel.$viewValue || '');
          };

          //  Listening for Events on Elements 
          element.on('blur keyup change', function() {
            scope.$apply(setViewValue);
          });

          setViewValue();

          //  Update view values on the model 
          function setViewValue() {
            var val = element.val();
            ngModel.$setViewValue(val);
          }
        } 
      }
    })

---The above code use example is < input def-laydate type="text" id="id1" ng-model="startTime" max-date="{{model.max}}" min-date="{{model.min}}"/ > min-date, max-date attributes are added as needed.

This instruction 1 can be used in general, but there is a problem when it is used in combination with ngDialog: when layDate gets elements in initialization, html content in pop-up window has not been held in the node tree of the page, so an error is reported.

Therefore, I hope that the link code of the instruction can be executed after the pop-up window is rendered. After searching for data, $timeout is introduced into the instruction:

app.directive('ngcLayDate', function($timeout) {
      return {
        require: '?ngModel',
        restrict: 'A',
        scope: {
          ngModel: '=',
          maxDate:'@',
          minDate:'@'
        },
        link: function(scope, element, attr, ngModel) {
          var _date = null,_config={};
           //  Execute when rendering template is complete 
          $timeout(function(){ 
            //  Initialization parameter  
            _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);
              }
            };
            //  Initialization 
            _date= laydate(_config);

            //  Maximum listening date 
            if(attr.hasOwnProperty('maxDate')){
              attr.$observe('maxDate', function (val) {
                _config.max = val;
              })
            }
            //  Minimum listening date 
            if(attr.hasOwnProperty('minDate')){
              attr.$observe('minDate', function (val) {
                _config.min = val;
              })
            }
            
            //  Synchronize model values to views 
            ngModel.$render = function() {
              element.val(ngModel.$viewValue || '');
            };

            //  Listening for Events on Elements 
            element.on('blur keyup change', function() {
              scope.$apply(setViewValue);
            });

            setViewValue();

            //  Update view values on the model 
            function setViewValue() {
              var val = element.val();
              ngModel.$setViewValue(val);
            }
          },0); 
        }
      };
    })

OK, problem solving. The process of solving problems is accompanied by the process of checking data, which is perfect step by step. I also hope that everyone will take fewer detours when encountering the same problem