date validator

Date validation and filtering

by long2know

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<div ng-include="'menu.html'"></div>
<div ui-view="main" class="container"></div>

<script type="text/ng-template" id="menu.html">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <span class="navbar-brand">Our Menu</span>
            </div>
        </div>
    </nav>
</script>

<script type="text/ng-template" id="state1.html">
    <form class="form-inline" name="vm.form" role="form" novalidate>
        <div class="form-group">
            <div...

CSS

.form-group.has-error .error {
      color: #a94442;
}

small {
    font-size: 0.625em;
    font-style: italic;
    display: block;
    float:right;
}

input {
    display:block !important;
}

label {
    display:block;
}

.container {
    width: auto !important;
}

.form-inline .form-group {
    display:inline-block;
    width: auto;
}

input {
    width: 250px !important;
}

JavaScript

(function () {
    angular.module('myApp.services', ['ngResource', 'ngAnimate']);
    angular.module('myApp.controllers', []);
    angular.module('myApp.directives', []);

    var myApp = angular.module('myApp', [
        'myApp.services',
        'myApp.controllers',
        'myApp.directives',
        'ngSanitize',
        'ui.bootstrap',
        'ui.router',
        'ui']);

    var dateBefore = function () {
        var directive = {
            require: 'ngModel',
            link: function (scope, el, attrs, ctrl) {
                var isInclusive = attrs.dateOrEquals ? scope.$eval(attrs.dateOrEquals) : false,
                    validate = function (val1, val2) {
                        if (val1 === undefined || val2 === undefined) return;
                        var isArray = val2 instanceof Array;
                        var isValid = true;
                        var date1 = new Date(val1);
                        if (isArray && val2.length > 0) {
                            for (var i = 0; i < val2.length; i++) {
                                if (val2[i] !== undefined) {
                                    var date2 = new Date(val2[i]);
                                    isValid = isValid && (isInclusive ? date1 <= date2 : date1 < date2);
                                }
                                if (!isValid)
                                    break;
                            }
                        }
                        else {
                            if (val2 !== undefined) {
                                var date2 = new Date(val2);
                                isValid = isInclusive ? date1 <= date2 : date1 < date2;
                            }
                        }
                        ctrl.$setValidity('dateBefore', isValid);
                    };
                // Watch the value to compare - trigger validate()
                scope.$watch(attrs.dateBefore, function () {
                   ...