date-range-custom-validation-in-angular-js - 快车库

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body ng-controller="MainCtrl">

    <form name="form">

        Min: <input name="min" type="date" format-date="yyyy-MM-dd" ng-model="field.min" date-max="{{field.max}}" />

        <span class="error">
            {{form.min.$error|json}}
        </span>

        <span class="error" ng-show="form.min.$error.dateMax">
            Min cannot exceed max.
        </span>
        <span class="error" ng-show="form.min.$error.date">
            date format error.
        </span>

        <br />

        Max: <input name="max" type="date" format-date="yyyy-MM-dd" ng-model="field.max" date-min="{{field.min}}" />
        {{field.max}}

        <span class="error" ng-show="form.max.$error.dateMin">
            dateMin error.
        </span>
        <span class="error" ng-show="form.max.$error.date">
            date format error.
        </span>
    </form>

    <script src="http://cdn.bootcss.com/angular.js/1.3.20/angular.min.js"></script>

    <script>
        var app = angular.module('app', []);

        app.controller('MainCtrl', function ($scope) {
            $scope.field = {
                min: '2016-03-02',
                max: '2016-03-02',
            };
        });

        app.directive('dateMax', ['$filter', '$parse', function ($filter, $parse) {

            var link = function ($scope, $element, $attrs, ctrl) {

                var validate = function (viewValue) {
                    var comparisonModel = $attrs.dateMax;

                    if (!viewValue || !comparisonModel) {
                        // It's valid because we have nothing to compare against
                        ctrl.$setValidity('dateMax', true);
                        return viewValue;
                    }

                    // It's valid if model is lower than the model we're comparing against
                    var minDate = new Date(viewValue);
                    var maxDate = new Date(comparisonModel);

                    ctrl.$setValidity('dateMax', minDate < maxDate);
                    return viewValue;
                };

                ctrl.$parsers.unshift(validate);
                ctrl.$formatters.push(validate);

                $attrs.$observe('dateMax', function (comparisonModel) {
                    // Whenever the comparison model changes we'll re-validate
                    return validate(ctrl.$viewValue);
                });
            };

            return {
                require: 'ngModel',
                link: link
            };
        }]);

        app.directive('dateMin', ['$filter', '$parse', function ($filter, $parse) {

            var link = function ($scope, $element, $attrs, ctrl) {

                var validate = function (viewValue) {
                    var comparisonModel = $attrs.dateMin;

                    if (!viewValue || !comparisonModel) {
                        // It's valid because we have nothing to compare against
                        ctrl.$setValidity('dateMin', true);
                        return viewValue;
                    }

                    // It's valid if model is lower than the model we're comparing against
                    var minDate = new Date(viewValue);
                    var maxDate = new Date(comparisonModel);

                    ctrl.$setValidity('dateMin', minDate > maxDate);
                    return viewValue;
                };

                ctrl.$parsers.unshift(validate);
                ctrl.$formatters.push(validate);

                $attrs.$observe('dateMin', function (comparisonModel) {
                    // Whenever the comparison model changes we'll re-validate
                    return validate(ctrl.$viewValue);
                });
            };

            return {
                require: 'ngModel',
                link: link
            };
        }]);

        app.directive('formatDate', function ($filter) {
            return {
                require: 'ngModel',
                scope: {
                    formatDate: '@',
                },
                link: function (scope, element, attrs, ngModel) {
                    //value
                    ngModel.$parsers.push(function (val) {
                        return $filter('date')(val, scope.formatDate || 'yyyy-MM-dd HH:mm:ss');
                    });
                    //show
                    ngModel.$formatters.push(function (val) {
                        if (!val) return null;
                        return new Date(val);
                    });
                }
            };
        });

    </script>
</body>
</html>