Custom validation in angularjs compare two dates

Question

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'" />

Nicolas · Accepted Answer · 2018-05-26 00:47:37Z

1

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

edited May 26, 2018 at 0:47

answered May 26, 2018 at 0:44

Nicolas

8,7364 gold badges25 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mr world wide Over a year ago

comparison is working fine I want expiry date as $invalid when comparison is true

Nicolas Over a year ago

Oh, my bad then. let me do some more research

Nicolas Over a year ago

@Mrworldwide I don't think you need the ternary expression in your ng-required condition, just do ng-required="formStep1.expiry_date.$modelValue < formStep1.hiring_date.$modelValue"

Mr world wide Over a year ago

it's not ternary problem I need ng-invalid or ng-valid to validate that form field , not sure how to do it.

Nicolas Over a year ago

You could look into this question

Mr world wide · Accepted Answer · 2018-05-26 01:15:40Z

0

<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..?

answered May 26, 2018 at 1:15

Mr world wide

4,86410 gold badges47 silver badges105 bronze badges

Collectives™ on Stack Overflow

Custom validation in angularjs compare two dates

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related