Need Help to validate angular jquery UI datepicker directive

Question

I'm creating an angularjs directive with jQuery-UI datepicker, I'm using it in angularjs formly, but stuck on the validation part. I'm using this directive in both from and to date where I need to validate the to date not greater than from date, I post my directive code below for your reference. Please correct me regarding the validation to be done.

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 file where am using the directive for 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 :"
}
}]

to Date should be higher ?

Gayathri Mohan
– Gayathri Mohan

2016-06-09 05:59:59 +00:00
Commented Jun 9, 2016 at 5:59 — Gayathri Mohan
– Gayathri Mohan, Commented Jun 9, 2016 at 5:59
@gayathri yeah to date should be greater than the from date

balajivaishnav
– balajivaishnav

2016-06-09 06:09:37 +00:00
Commented Jun 9, 2016 at 6:09 — balajivaishnav
– balajivaishnav, Commented Jun 9, 2016 at 6:09

Gayathri Mohan · Accepted Answer · 2016-06-09 07:36:18Z

1

HI please check this the design may be not alligned

HTML

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <h1> Selected date: {{date2}}</h1>
  <h1> Selected date: {{todate}}</h1>

  <input type="text" ng-model="date2" valueupdate="date2"  datepicker pie-chart-limit-progress-bar="todate" />

  <input type="text" ng-model="todate" datepicker   />

</body>
</html>

and in script.js

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();

          }
        }




      });

    }

};
}]);

for reference http://plnkr.co/edit/lolRZ1GdIiXNb25NwfZR?p=preview

answered Jun 9, 2016 at 7:36

Gayathri Mohan

2,9724 gold badges21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

balajivaishnav Over a year ago

do you know how I can refer this in angular formly in the JSON file

Gayathri Mohan Over a year ago

sorry i dint understand your question once user manually selects then only u can check where from and to dates which is bigger right ?

balajivaishnav Over a year ago

the functional part is to check the from and to date is right, but am using angularjs formly not the plain HTML file, so I have to refer this part datepicker pie-chart-limit-progress-bar="todate" (which is in HTML) to the JSON file (which I have pasted in the question) do you get my question ?..

Gayathri Mohan Over a year ago

if u wants to read from JSON u can directly do in controller comparing the response two dates and show error message simple , if u wants to perfom on selecting the datepicker follow the above one

balajivaishnav Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

Need Help to validate angular jquery UI datepicker directive

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related