Take a look at this form:
<form name="user_submission" novalidate="novalidate" method="post">
<input type="date" name="date_of_birth" ng-focus="save_data()" ng-model-options="{timezone: 'UTC'}" ng-pattern="/^(19\d{2}|[2-9]\d{3})-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/" ng-model="step_content.date_of_birth" required ng-maxlength="10" ng-minlength="10" >
<br>
<span class="error" ng-show="user_submission.date_of_birth.$error.pattern">Incorrect format!</span>
<span class="error" ng-show="user_submission.date_of_birth.$error.date">Incorrect Date!</span>
<span class="error" ng-show="user_submission.date_of_birth.$error.minlength">Incorrect Date!</span>
<span class="error" ng-show="user_submission.date_of_birth.$error.maxlength">Incorrect Date!</span>
</form>
This is the correct output from the form above:
https://i.stack.imgur.com/AUyB5.png
I want to limit the Year to 'yyyy' but I am still able to enter more than 4 digits.
https://i.stack.imgur.com/7RoHS.png
I attempted to use a directive for this purpose:
// Usage: <input limit-to="4" type="number" >
app.directive("limitTo", [function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.limitTo);
angular.element(elem).on("keydown", function() {
if (this.value.length == limit) return false;
});
}
}
}]);
However, when I apply the limitTo to the date field, I am unable to input a complete year. It seems like Angular is modifying the 'yyyy' by adding a number from the right and removing a 'y' from the left, making limitTo=10 ineffective.
I have run out of ideas.
Any assistance or guidance would be highly appreciated.
Thank you in advance.