Question

我正在使用jQuery-UI datepicker创建一个angularjs指令，我在angularjs形式上使用它，但卡在验证部分。我在现在需要验证日期不超过日期时使用此指令，我在下面发布我的指令代码供您参考。关于要完成的验证，请纠正我。

app.directive("datePicker", function () {
return {
    restrict: "A",
    require: "ngModel",
    link: function (scope, elem, attrs, ngModel) {
        var updateModel = function (dateText) {  
            ngModel.$render = function () {
                scope.$apply(function () {
                    ngModel.$setViewValue(dateText);
                    console.log(dateText);
                });
                };

        };
        var options = {
            dateFormat: "mm/dd/yy",
            onSelect: function (dateText) {
                updateModel(dateText);
            },
            showButtonPanel: true
        };
        elem.datepicker(options);
    }
};

}）;

Json文件在哪里使用angularjs formly指令

[{
"id": "fromdate",
"key": "fromdate",
"type": "input",
"ngModelAttrs": {
    "datePicker": {
        "attribute": "date-picker"
    }
},
"templateOptions": {
    "required": true,
    "datePicker": "",
    "label": "From Date :"
}

}, {
"id": "todate",
"key": "todate",
"type": "input",
"ngModelAttrs": {
    "datePicker": {
        "attribute": "date-picker"
    }
},
"templateOptions": {
    "required": true,
    "datePicker": "",
    "label": "To Date :"
}
}]

Answer 1

请检查此设计可能未签名

HTML

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.date2 = '19/03/2013';
});


app.directive('datepicker', function() {
    return {
        restrict: 'A',   
        require : 'ngModel',

        link : function (scope, element, attrs, ngModelCtrl) {
            $(function(){
                element.datepicker({
                    dateFormat:'dd/mm/yy',
                    onSelect:function (date) {
                        ngModelCtrl.$setViewValue(date);
                        scope.valueupdate = date;
                          scope.$apply(); 
                    }
                });
            });
        }
    }
});
app.directive('pieChartLimitProgressBar',['$compile', function ($compile) {
  return {
    restrict: 'A',
    scope: {
        percent: "=pieChartLimitProgressBar",        
        valueupdate: '='
    },
    link: function (scope, elem, attr, ctrl) {

      scope.$watch('displayvalue', function(value) {

console.log(value);
      });

      scope.$watch('percent', function(value) {        

        if(scope.valueupdate != undefined && value != undefined)
        {
          var from = scope.valueupdate.split("/");
         var fromdate = new Date(from[2], from[1] - 1, from[0]);
         var todate = value.split("/");
         var todatevalue = new Date(todate[2], todate[1] - 1, todate[0]);
          console.log(fromdate , todatevalue)

          if (fromdate > todatevalue ) {
             var myEl = angular.element( document.querySelector( '#divID' ) );
               myEl.empty();
             var tpl = '<div id="divID"  ng-show = true style="color:red">TO Date should be HIgher</div>' ;
                var el = $compile(tpl)(scope);
                elem.after(el);
          }
          else
          {
            var myEl = angular.element( document.querySelector( '#divID' ) );
               myEl.empty();

          }
        }




      });

    }

};
}]);

和script.js

a:focus {
color: cadetblue;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

供参考http://plnkr.co/edit/lolRZ1GdIiXNb25NwfZR?p=preview

需要帮助来验证角度jquery UI datepicker指令

1 个答案: