CODEWITHSUNDEEP
javascriptangularjsvalidation
Mr world wide
Mr world wide

Reputation: 4844

Custom validation in angularjs compare two dates

I have two fields hiring_date and expiry_date I am using angular UI datepicker. I want to validate the form if hiring date is greater than the expiry date

This is my code: logic is okay but how can I set this to form error as false

<small ng-show="formStep1.expiry_date.$invalid && 
formStep1.expiry_date.$touched " class="errorMsg ">
Please enter valid date (YYYY-MM-DD).</small>

<small 
ng-show="formStep1.expiry_date.$modelValue < formStep1.hiring_date.$modelValue"
class="errorMsg ">
Expiry Date should not be a older than Target Hiring Date.</small>

i am getting true and false in this based on two input dates

formStep1.expiry_date.$modelValue < formStep1.hiring_date.$modelValue

Is it possible to do validation from view side..?

The message is displaying fine but i want the field expiry_date should be like required.

I have tried something like this but not working:

<input datepicker-options="dateOptions" 
type="text" 
class="form-control" 
ng-model="expiry_date" 
is-open="config2.opened"  
uib-datepicker-popup="yyyy-MM-dd" 
close-text="Close" 
name="expiry_date" 
show-button-bar="false" 
ng-required="formStep1.expiry_date.$modelValue < formStep1.hiring_date.$modelValue ? 'true': 'false'" />

Upvotes: 0

Views: 1054

Answers (2)

Mr world wide
Mr world wide

Reputation: 4844

<span ng-if="formStep1.expiry_date.$modelValue < formStep1.hiring_date.$modelValue ? invalidExp(): ''" ></span>


    $scope.invalidExp = function () {
        $scope.formStep1.expiry_date.$valid = false; 
    }

this one worked. any better solution then this..?

Upvotes: 0

Nicolas
Nicolas

Reputation: 8695

I would suggest using momentJs for any kind of date manipulation. Tom Scott could explain you why here. Anyway, for your particular case, there is a moment-angular library that could be use as such : 

/* controller declaration */.('$scope', 'moment', function($scope, moment) {
    $scope.isDateBefore = function(firstDate, secondDate) {
        return moment(firstDate).isBefore(secondeDate);
    }
})


<small 
    ng-show="isDateBefore(formStep1.expiry_date.$modelValue, formStep1.hiring_date.$modelValue)"
class="errorMsg ">

You can learn more about the isBefore function on the official momentjs doc

Upvotes: 1

Related Questions