Question

150

angularjs comparing two dates

rated 0 times [ 154] [ 4] / answers: 1 / hits: 14657 / 10 Years ago, fri, december 12, 2014, 12:00:00

Html code:

<form name=FrmMessageSearch ng-submit=searchMessages() novalidate=novalidate>



<input type=text name=fromDate validate-from-date={{message.toDate}} ng-model=message.fromDate jqdatepicker/>

<span ng-show=FrmMessageSearch.fromDate.$error.enterFromDate && FrmMessageSearch.fromDate.$dirty>Select From Date</span>

<span ng-show=FrmMessageSearch.fromDate.$error.validateFromDateRequired && FrmMessageSearch.fromDate.$dirty>From Date Should be less than To Date</span>



<input type=text name=toDate validate-from-date={{message.fromDate}} ng-model=message.toDate jqdatepicker/>

<span ng-show=FrmMessageSearch.toDate.$error.enterToDate && FrmMessageSearch.toDate.$dirty>Select To Date</span>

<span ng-show=FrmMessageSearch.toDate.$error.validateToDate && FrmMessageSearch.toDate.$dirty>To Date should be greater than From Date</span>



<button ng-disabled=(!FrmMessageSearch.$valid) class=btn btn-primary type=submit>

</form>

Js Code:

app.directive('validateToDate', function($log)

{

    return {

        restrict : 'A',

        require : 'ngModel',

        link : function(scope, element, attr, controller)

        {

            controller.$parsers.unshift(function(value)

            {

                var toDate = Date.parse(value);

                var fromDate = Date.parse(attr.validateToDate);



                var valid;

                if (value == '' && fromDate != '')

                {

                    controller.$setValidity('enterToDate', false);

                    valid = false;

                }

                else

                {

                    valid = true;

                    controller.$setValidity('enterToDate', true);

                    if (fromDate <= toDate)

                    {

                        valid = true;

                        controller.$setValidity('validateToDate', true);

                    }

                    else

                    {

                        valid = false;

                        controller.$setValidity('validateToDate', false);

                    }

                }



                return valid ? value : undefined;

            })

        }

    };

})

app.directive('validateFromDate', function($log)

{

    return {

        restrict : 'A',

        require : 'ngModel',

        link : function(scope, element, attr, controller)

        {

            controller.$parsers.unshift(function(value)

            {

                var toDate = Date.parse(attr.validateFromDate);

                var fromDate = Date.parse(value);

                var valid;



                if (value == '' && toDate != '')

                {

                    controller.$setValidity('enterFromDate', false);

                    valid = false;

                }

                if (fromDate <= toDate)

                {

                    valid = true;

                    controller.$setValidity('validateFromDate', true);

                }

                else

                {

                    valid = false;

                    controller.$setValidity('validateFromDate', false);

                }



                return valid ? value : undefined;

            })

        }

    };

})

What I am trying to do here is:
1) either both dates should be selected or none
2) if only one date is selected other should prompt error saying please select date
3) from date should be greater that to date
Can some one please help how can I get this done, any help is highly appreciated, thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

herman

Add To Favorites

Follow

Total Points: 110

Total Questions: 90

Total Answers: 108

Location: Bosnia and Herzegovina

Member since Thu, Jun 24, 2021

3 Years ago

answered 10 Years ago kourtney · Accepted Answer

i have written directives for very similar purpose, I am using moment.js for date validations, but you can replace them with javascript Date object.

csapp.directive('isPastDate', function () {



    var linkFn = function (scope, element, attrs, ngModel) {



      scope.$watch(function () {

            return ngModel.$modelValue;

        }, function () {

            var myDate = moment(ngModel.$modelValue).format('YYYY-MM-DD');

            var dateToCheck = moment(attrs.isPastDate).format('YYYY-MM-DD');

            var result = moment(myDate).isBefore(dateToCheck);

            ngModel.$setValidity(isPastDate, result);

        });



        attrs.$observe(isPastDate, function () {

            var myDate = moment(ngModel.$modelValue).format('YYYY-MM-DD');

            var dateToCheck = moment(attrs.isPastDate).format('YYYY-MM-DD');

            var result = moment(myDate).isBefore(dateToCheck);

            ngModel.$setValidity(isPastDate, result);

        });

    };



    return {

        require: 'ngModel',

        link: linkFn

    };

});

there are 2 parts to it, first one is if the start-date change and second one is if the end date change.

the start date needs to be validated in both cases.

csapp.directive('isFutureDate', function () {



    var linkFn = function (scope, element, attrs, ngModel) {



        scope.$watch(function () {

            return ngModel.$modelValue;

        }, function () {

            var myDate = moment(ngModel.$modelValue).format('YYYY-MM-DD');

            var dateToCheck = moment(attrs.isFutureDate).format('YYYY-MM-DD');

            var result = (moment(myDate).isAfter(dateToCheck));

            ngModel.$setValidity(isFutureDate, result);

        });



        attrs.$observe(isFutureDate, function () {

            var myDate = moment(ngModel.$modelValue).format('YYYY-MM-DD');

            var dateToCheck = moment(attrs.isFutureDate).format('YYYY-MM-DD');

            var result = (moment(myDate).isAfter(dateToCheck));

            ngModel.$setValidity(isFutureDate, result);

        });

    };



    return {

        require: 'ngModel',

        link: linkFn

    };

});