CODEWITHSUNDEEP
angularjsvalidationdatepickerangular-ui-bootstrap
Micko
Micko

Reputation: 441

Manually entered date is not being validated - uib datepicker popup

I am using 0.14.3 angular-bootstrap version. I have issues with min and max validation for uib-datepicker-popup. min-date and max-date are working as expected, dates are disabled on popup view. However if I enter manually dates inside input text validation is not there...I added even min and max attributes but nothing again. When check in form.$error and there is not validation error.

 <input id="projEndDate" class="form-control date-picker"
        uib-datepicker-popup="{{planningvm.format}}" 
        show-button-bar="false" 
        ng-model="reviewvm.review.projectedEndDt"
        data-ng-click="planningvm.openDatePicker('projEndDate')"
        placeholder="mm/dd/yyyy" name="projEndDate" show-weeks="false"
        required is-open="planningvm.projEndDate.opened"
        min="reviewvm.review.projectedStartDt"
        min-date="reviewvm.review.projectedStartDt" />
    <span data-ng-class="{'not-allowed input-group-addon' : !reviewvm.userReviewAssoc || !reviewvm.editMode, 'input-group-addon' : reviewvm.userReviewAssoc}"
                   data-ng-click="planningvm.openDatePicker('projEndDate')">
                   <div class="icon-calendar" id="icon-daterange-end" >
                   </div>
     </span>

Is there some way that i can maybe check for date validation when user type manually in input and set that ng-model to min or max corresponding?

Upvotes: 0

Views: 1671

Answers (1)

CAK2
CAK2

Reputation: 1990

This appears to be a known issue when using the uib-datepicker-popup with input min and max validations: Datepicker input not validated for min and max when manually inserting date #4664 that they do not intend on fixing. I developed a workaround that performs the validations when the input value changes like so:

            // watch date value
            scope.$watch((scope) => {
                //return object to watch.
                return this.date;
            }, (newValue: Date, oldValue: Date) => {
                this.onValueChange();
                });

        private onValueChange() {
            if (angular.isDefined(this.date) && this.date && !this.myForm.date.$error.date) {
                this.myForm.date.$setValidity("min", moment(this.date).isSameOrAfter(this.minDate));
                this.myForm.date.$setValidity("max", moment(this.date).isSameOrBefore(this.maxDate));
            } else {
                this.myForm.date.$setValidity("min", true);
                this.myForm.date.$setValidity("max", true);
            }
        }

Upvotes: 0

Related Questions