Angularjs min-date max-date validation messages - angularjs

Question

Angularjs - bootstraup UI- trying to place min-date max-date validation error messages.
but it is not working, not showing any min-date or max-date validation message.
I also tried form.offerEndDate.$error.min or form.offerEndDate.$error.max still didn't work
<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

Here's finally my workaround for this problem:
<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 is a custom directive:
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);
});
}
};
}]);
This gives me the wanted solution, invalid the input and show ng-message with the minDate and maxDate allowed
Here's the javascript part of html:
$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

It can be connected to this issue.
Try to change min-date to min. and max-date to max.
Also keep in mind this issue. So you will be still able to type in manually date in the input field, though your calender will be disabled.