Question

Angularjs - bootstraup UI-尝试放置最小日期最大日期验证错误消息。

但它不起作用，没有显示任何最小日期或最大日期验证消息。

我也尝试form.offerEndDate.$error.min或form.offerEndDate.$error.max仍然无效

<p class="input-group">
    <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="form.offerEndDate" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>

<div ng-show="form.offerEndDate.$dirty && form.offerEndDate.$invalid">
    <span class="alert-danger" ng-show="form.offerEndDate.$error.required"> 
        Offer End Date is required.
    </span>
    <span class="alert-danger" ng-show="form.offerEndDate.$error.minDate"> 
        Min Date Error.
    </span>
    <span class="alert-danger" ng-show="form.offerEndDate.$error.maxDate"> 
        Max Date Error.
    </span>
</div>

Answer 1

这里终于找到了解决这个问题的方法：

<div class="input-group">
<input name="endDate" class="form-control" type="text" is-open="openedEnd"
       datepicker-popup="shortDate" ng-focus="openedEnd=true"
       date-disabled="disabledEnd(date,mode)"
       datepicker-options="dateOptions"
       ng-model="offre.endDate" required="" min="endMinDate" max="endMaxDate"
       ts-valid-date="" />
<span class="input-group-btn">
    <button type="button" class="btn btn-default btn-default-bordered" ng-click="openEnd($event)">
        <i class="fa fa-calendar"></i>
    </button>
</span>
</div>
<div class="alert alert-danger"
 ng-messages="formOffre.endDate.$error"
 ng-if="formOffre.endDate.$dirty || vm.showOffreValidation">
<div ng-message="required">@L("RemplissezLaDateDeFin")</div>
<div ng-message="date">@L("DateIncorrecte")! {{vm.endDateInvalidMessage}}        </div>
<div ng-message="invalidDate">@L("DateIncorrecte")! {{vm.startDateInvalidMessage}}</div>
<div ng-messages-include="error-messages"></div>

ts-valid-date是一个自定义指令：

angular.module('app')
.directive('tsValidDate', ['$parse', function ($parse) {
return {
    require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
        scope.$watch(function () {
            return $parse(attrs.min)(scope) <= ctrl.$modelValue && $parse(attrs.max)(scope) >= ctrl.$modelValue;
        }, function (currentValue) {
            ctrl.$setValidity('invalidDate', currentValue);
        });
    }
};
}]);

这给了我想要的解决方案，使用minDate和maxDate允许的输入和显示ng-message无效

这里是html的javascript部分：

$scope.dateOptions = {
    showButtonBar: false,
    startingDay: 1
};
$scope.startMinDate = new Date();
$scope.startMaxDate = new Date(new Date().getFullYear() + 5, new Date().getMonth(), new Date().getDate());
$scope.endMinDate = new Date();
$scope.endMaxDate = new Date(new Date().getFullYear() + 5, new Date().getMonth(), new Date().getDate());
vm.startDateInvalidMessage = abp.utils.formatString($scope.dateInvalidMessage,
    $filter('date')($scope.startMinDate), $filter('date')($scope.startMaxDate));
vm.endDateInvalidMessage = abp.utils.formatString($scope.dateInvalidMessage,
    $filter('date')($scope.endMinDate), $filter('date')($scope.endMaxDate));
$scope.disabledStart = function (date, mode) {
    return date <= $scope.startMinDate || date > $scope.startMaxDate;
};
$scope.disabledEnd = function (date, mode) {
    return date < $scope.endMinDate || date >= $scope.endMaxDate;
};
$scope.verifyDate = function () {
    if ($scope.offre.startDate) {
        $scope.endMinDate = $scope.offre.startDate;
        vm.startDateInvalidMessage = abp.utils.formatString($scope.dateInvalidMessage,
            $filter('date')($scope.startMinDate), $filter('date')($scope.startMaxDate));
        vm.endDateInvalidMessage = abp.utils.formatString($scope.dateInvalidMessage,
            $filter('date')($scope.endMinDate), $filter('date')($scope.endMaxDate));
    }
    if ($scope.offre.endDate) {
        $scope.startMaxDate = $scope.offre.endDate;
        vm.startDateInvalidMessage = abp.utils.formatString($scope.dateInvalidMessage,
            $filter('date')($scope.startMinDate), $filter('date')($scope.startMaxDate));
        vm.endDateInvalidMessage = abp.utils.formatString($scope.dateInvalidMessage,
            $filter('date')($scope.endMinDate), $filter('date')($scope.endMaxDate));
    }
};
$scope.$watch('offre.endDate', function () {
    $scope.verifyDate();
});
$scope.$watch('offre.startDate', function () {
    $scope.verifyDate();
});
$scope.openStart = function ($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.openedStart = true;
};
$scope.openEnd = function ($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.openedEnd = true;
};

Answer 2

它可以连接到this问题。

尝试将min-date更改为min。和max-date到max。

另请注意this问题。因此，您仍然可以在输入字段中手动输入日期，但您的日历将被禁用。

Angularjs最小日期最大验证消息

2 个答案: