Angular JS Directive for eonasdan Bootstrap 3 Datepicker v4 - Single example

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>angular-eonasdan-datetimepicker</title>

    <!-- bower:css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/4.17.37/build/css/bootstrap-datetimepicker.min.css">
    <!-- endinject -->
</head>

<body ng-app="plunker">

<div ng-controller="controller as vm">

  <div class="well">
    <h3>Angular-eonasdan-datetimepicker</h3>
    <p style="margin: -10px 0 0 0;">
        https://github.com/atais/angular-eonasdan-datetimepicker</p>
    <br>
    <form name="dates_form">
      <div class="row">
          <div class="col-md-3">
              <div class="form-group" ng-class="{ 'has-error': dates_form.dateFrom.$invalid }">
                  <div class="input-group" datetimepicker ng-model="vm.dateFrom"
                       options="vm.options" >
                      <input type="text" name="dateFrom" id="dateFrom" class="form-control"
                              validate-before="dates_form.dateTo">
                      <span class="input-group-addon">
                          <span class="glyphicon glyphicon-calendar"></span>
                      </span>
                  </div>
                  {{vm.dateFrom}}<br>
                  dateFrom.$invalid:{{dates_form.dateFrom.$invalid}}
              </div>
          </div>
          <div class="col-md-3">
              <div class="form-group" ng-class="{ 'has-error': dates_form.dateTo.$invalid }">
                  <div class="input-group" datetimepicker ng-model="vm.dateTo"
                       options="vm.options" >
                      <input type="text" name="dateTo" class="form-control"
                               validate-after="dates_form.dateFrom">
                      <span class="input-group-addon">
                          <span class="glyphicon glyphicon-calendar"></span>
                      </span>
                  </div>
                  {{vm.dateTo}}<br>
                  dateTo.$invalid:{{dates_form.dateTo.$invalid}}
              </div>
          </div>
          
      </div>
    </form>
  </div>
  
</div>

<!-- bower:js -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/4.17.37/build/js/bootstrap-datetimepicker.min.js"></script>
<!-- endinject -->
<script src="https://rawgit.com/atais/angular-eonasdan-datetimepicker/0.3.3/dist/angular-eonasdan-datetimepicker.min.js"></script>
<script src="script.js"></script>
</body>
</html>

(function () {
    'use strict';

    angular.module('plunker', ['ae-datetimepicker'])
        .controller('controller', [function () {
            var vm = this;

            vm.dateFrom = moment().subtract(14, 'days').format('MM/DD/YYYY HH:mm');
		        vm.dateTo = moment().format('MM/DD/YYYY HH:mm');
		        
		        /*vm.fromOpt = {
        			format: 'MM/DD/YYYY HH:mm',
        			allowInputToggle: false,
        			keyBinds: {'delete':null},
        			focusOnShow: false,
        			useCurrent: false,
        			defaultDate: false,
        			showClear: true,
              showClose: true,
        		};
        		vm.toOpt = {
        			format: 'MM/DD/YYYY HH:mm',
        			allowInputToggle: false,
        			keyBinds: {'delete':null},
        			focusOnShow: false,
        			defaultDate: false,
        			showClear: true,
              showClose: true,
        		};*/
		        
            vm.options = {
              format: 'MM/DD/YYYY HH:mm',
        			allowInputToggle: false,
        			keyBinds: {'delete':null},
        			focusOnShow: false,
        			useCurrent: false,
              extraFormats: ['MM/DD/YYYY', 'YYYY-MM-DDTHH:mm:ssZ']
            };
        }]);
        
        
        
        
  angular
    .module('plunker')
    .directive('validateBefore', ['$timeout', validateBefore]);

  angular
    .module('plunker')
    .directive('validateAfter', ['$timeout', validateAfter]);
    
    
    
  function validateBefore($timeout) {
    return {
      restrict: "A",
      require: "?ngModel",
      link: function(scope, element, attributes, ngModel) {
        var comparisonElement = scope.$eval(attributes.validateBefore),
          returnValue, comparisonValue;
          
        ngModel.$validators.validateBefore = function(modelValue) {
          comparisonElement = scope.$eval(attributes.validateBefore);
          
          if (typeof modelValue === 'undefined' || modelValue === null || modelValue === '') {
            return true;
          }
          //debugger;
          if ((typeof comparisonElement === 'undefined' || comparisonElement === null || comparisonElement === '') ||
               typeof comparisonElement !== 'string' && !angular.isArray(comparisonElement) &&
              (typeof comparisonElement.$viewValue === 'undefined' || comparisonElement.$viewValue === null || comparisonElement.$viewValue === '')) {
            // Tries to update the variable
            comparisonElement = scope.$eval(attributes.validateBefore);
            return true;
          }

          comparisonValue = (comparisonElement !== null && typeof comparisonElement.$viewValue !== 'undefined') ? 
            toMoment(new Date(comparisonElement.$viewValue)) : 
            null;
          
          if (comparisonValue === null || comparisonValue === '') {
            return true;
          }
          returnValue = toMoment(modelValue).isBefore(comparisonValue);

          if (returnValue && typeof comparisonElement.$viewValue !== 'undefined' && comparisonElement.$invalid) {
            $timeout(function() {
            	comparisonElement.$validate();
            });
          }
          return returnValue;
        };
      }
    };
  }

  function validateAfter($timeout) {
    return {
      restrict: "A",
      require: "?ngModel",
      link: function(scope, element, attributes, ngModel) {
        var comparisonElement = scope.$eval(attributes.validateAfter),
          returnValue, comparisonValue;

        ngModel.$validators.validateAfter = function(modelValue) {
          comparisonElement = scope.$eval(attributes.validateAfter);
          
          if (typeof modelValue === 'undefined' || modelValue === null || modelValue === '') {
            return true;
          }
          //debugger;
          if ((typeof comparisonElement === 'undefined' || comparisonElement === null || comparisonElement === '') ||
               typeof comparisonElement !== 'string' && !angular.isArray(comparisonElement) &&
              (typeof comparisonElement.$viewValue === 'undefined' || comparisonElement.$viewValue === null || comparisonElement.$viewValue === '')) {
            // Tries to update the variable
            comparisonElement = scope.$eval(attributes.validateAfter);
            return true;
          }

          comparisonValue = (comparisonElement !== null && typeof comparisonElement.$viewValue !== 'undefined') ? 
            toMoment(new Date(comparisonElement.$viewValue)) : 
            null;

          returnValue = (comparisonValue === null || comparisonValue === '') ? true
            : toMoment(modelValue).isAfter(toMoment(comparisonValue));

          if (returnValue && typeof comparisonElement.$viewValue !== 'undefined' && comparisonElement.$invalid) {
            $timeout(function() {
            	comparisonElement.$validate();
            });
          }

          return returnValue;
        };
      }
    };
  }
  
  function toMoment(datetime) {
    var newDate = moment(new Date(datetime));
    if (newDate.isValid()) {
      return newDate;
    } else {
      return moment(datetime);
    }
  }

  function toMoments(datesArray) {
    var a = [];
    angular.forEach(datesArray, function (val) {
      if (!(typeof val === 'undefined' || val === null || val === '')) a.push(toMoment(val));
    });
    return a;
  }
})();