Question

Html代码：

<form name="FrmMessageSearch" ng-submit="searchMessages()" novalidate="novalidate">

<input type="text" name="fromDate" validate-from-date="{{message.toDate}}" ng-model="message.fromDate" jqdatepicker/>
<span ng-show="FrmMessageSearch.fromDate.$error.enterFromDate && FrmMessageSearch.fromDate.$dirty">Select From Date</span>
<span ng-show="FrmMessageSearch.fromDate.$error.validateFromDateRequired && FrmMessageSearch.fromDate.$dirty">From Date Should be less than To Date</span>

<input type="text" name="toDate" validate-from-date="{{message.fromDate}}" ng-model="message.toDate" jqdatepicker/>
<span ng-show="FrmMessageSearch.toDate.$error.enterToDate && FrmMessageSearch.toDate.$dirty">Select To Date</span>
<span ng-show="FrmMessageSearch.toDate.$error.validateToDate && FrmMessageSearch.toDate.$dirty">To Date should be greater than From Date</span>

<button ng-disabled="(!FrmMessageSearch.$valid)" class="btn btn-primary" type="submit">
</form>

Js代码：

app.directive('validateToDate', function($log)
{
    return {
        restrict : 'A',
        require : 'ngModel',
        link : function(scope, element, attr, controller)
        {
            controller.$parsers.unshift(function(value)
            {
                var toDate = Date.parse(value);
                var fromDate = Date.parse(attr.validateToDate);

                var valid;
                if (value == '' && fromDate != '')
                {
                    controller.$setValidity('enterToDate', false);
                    valid = false;
                }
                else
                {
                    valid = true;
                    controller.$setValidity('enterToDate', true);
                    if (fromDate <= toDate)
                    {
                        valid = true;
                        controller.$setValidity('validateToDate', true);
                    }
                    else
                    {
                        valid = false;
                        controller.$setValidity('validateToDate', false);
                    }
                }

                return valid ? value : undefined;
            })
        }
    };
})
app.directive('validateFromDate', function($log)
{
    return {
        restrict : 'A',
        require : 'ngModel',
        link : function(scope, element, attr, controller)
        {
            controller.$parsers.unshift(function(value)
            {
                var toDate = Date.parse(attr.validateFromDate);
                var fromDate = Date.parse(value);
                var valid;

                if (value == '' && toDate != '')
                {
                    controller.$setValidity('enterFromDate', false);
                    valid = false;
                }
                if (fromDate <= toDate)
                {
                    valid = true;
                    controller.$setValidity('validateFromDate', true);
                }
                else
                {
                    valid = false;
                    controller.$setValidity('validateFromDate', false);
                }

                return valid ? value : undefined;
            })
        }
    };
})

我在这里要做的是： 1）要么选择两个日期，要么都不选择 2）如果只选择了一个日期，则应提示错误说明请选择日期 3）从日期开始应该大于迄今为止有人可以帮助我如何完成这项工作，非常感谢任何帮助，谢谢

Answer 1

我已经为非常相似的目的写了指令，我使用moment.js进行日期验证，但你可以用javascript Date对象替换它们。

csapp.directive('isPastDate', function () {

    var linkFn = function (scope, element, attrs, ngModel) {

      scope.$watch(function () {
            return ngModel.$modelValue;
        }, function () {
            var myDate = moment(ngModel.$modelValue).format('YYYY-MM-DD');
            var dateToCheck = moment(attrs.isPastDate).format('YYYY-MM-DD');
            var result = moment(myDate).isBefore(dateToCheck);
            ngModel.$setValidity("isPastDate", result);
        });

        attrs.$observe("isPastDate", function () {
            var myDate = moment(ngModel.$modelValue).format('YYYY-MM-DD');
            var dateToCheck = moment(attrs.isPastDate).format('YYYY-MM-DD');
            var result = moment(myDate).isBefore(dateToCheck);
            ngModel.$setValidity("isPastDate", result);
        });
    };

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

它有两个部分，第一部分是开始日期的变化，第二部分是结束日期的变化。

在两种情况下都需要验证开始日期。

csapp.directive('isFutureDate', function () {

    var linkFn = function (scope, element, attrs, ngModel) {

        scope.$watch(function () {
            return ngModel.$modelValue;
        }, function () {
            var myDate = moment(ngModel.$modelValue).format('YYYY-MM-DD');
            var dateToCheck = moment(attrs.isFutureDate).format('YYYY-MM-DD');
            var result = (moment(myDate).isAfter(dateToCheck));
            ngModel.$setValidity("isFutureDate", result);
        });

        attrs.$observe("isFutureDate", function () {
            var myDate = moment(ngModel.$modelValue).format('YYYY-MM-DD');
            var dateToCheck = moment(attrs.isFutureDate).format('YYYY-MM-DD');
            var result = (moment(myDate).isAfter(dateToCheck));
            ngModel.$setValidity("isFutureDate", result);
        });
    };

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

Answer 2

感谢您的帮助，但我找到了解决方案，有些人会需要它。。

我基本上对我的指令进行了以下更改。。

app.directive('validateToDate', function($log)
{
    return {
        restrict : 'A',
        link : function($scope, $element, $attr)
        {
            $scope.$watch('message.toDate', function()
            {
                var toDate = Date.parse($scope.message.toDate);
                var fromDate = Date.parse($scope.message.fromDate);

                console.log(toDate);
                console.log(fromDate);

                if ($scope.FrmMessageSearch.toDate.$dirty)
                {
                    if (($scope.message.fromDate == '') && ($scope.message.toDate == ''))
                    {
                        $scope.FrmMessageSearch.toDate.$setValidity("enterToDate", true);
                        $scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", true);
                    }
                    else if (($scope.message.toDate == '') && ($scope.message.fromDate != ''))
                    {
                        $scope.FrmMessageSearch.toDate.$setValidity("enterToDate", false);
                        $scope.FrmMessageSearch.toDate.$setValidity("validateToDate", true);
                        $scope.FrmMessageSearch.fromDate.$setValidity("validateFromDate", true);
                    }
                    else if (($scope.message.toDate != '') && ($scope.message.fromDate == ''))
                    {
                        $scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", false);
                    }
                    else
                    {
                        $scope.FrmMessageSearch.toDate.$setValidity("enterToDate", true);
                        $scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", true);

                        if (toDate < fromDate)
                        {
                            $scope.FrmMessageSearch.toDate.$setValidity("validateToDate", false);
                        }
                        else
                        {
                            $scope.FrmMessageSearch.toDate.$setValidity("validateToDate", true);
                        }
                    }
                }
            })
        }
    };
})
app.directive('validateFromDate', function($log)
{
    return {
        restrict : 'A',
        link : function($scope, $element, $attr)
        {
            $scope.$watch('message.fromDate', function()
            {
                var toDate = Date.parse($scope.message.toDate);
                var fromDate = Date.parse($scope.message.fromDate);

                console.log(toDate);
                console.log(fromDate);

                if ($scope.FrmMessageSearch.fromDate.$dirty)
                {
                    $scope.FrmMessageSearch.fromDate.$setValidity("validateFromDate", true);
                    $scope.FrmMessageSearch.toDate.$setValidity("validateToDate", true);

                    if (($scope.message.fromDate == '') && ($scope.message.toDate == ''))
                    {
                        $scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", true);
                        $scope.FrmMessageSearch.toDate.$setValidity("enterToDate", true);
                    }
                    else if (($scope.message.fromDate == '') && ($scope.message.toDate != ''))
                    {
                        $scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", false);
                    }
                    else if ($scope.message.toDate == '')
                    {
                        $scope.FrmMessageSearch.toDate.$setValidity("enterToDate", false);
                    }
                    else if (($scope.message.fromDate == '') && ($scope.message.toDate == ''))
                    {
                        $scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", true);
                    }
                    else
                    {
                        $scope.FrmMessageSearch.toDate.$setValidity("enterToDate", true);
                        $scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", true);

                        if (toDate < fromDate)
                        {
                            $scope.FrmMessageSearch.fromDate.$setValidity("validateFromDate", false);
                        }
                        else
                        {
                            $scope.FrmMessageSearch.fromDate.$setValidity("validateFromDate", true);
                        }
                    }
                }
            })
        }
    };
})

angularjs比较两个日期

2 个答案: