JSFiddle - React, Tailwind, and code Playground

by dingen2010

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <form name="myForm" novalidate>
        <input type="text" ng-model="model.birthDate" name="birthDate" past-date /><br/>
        <span ng-show="myForm.birthDate.$error.pastDate">The date must be in the Past </span><br/>
        <button ng-disabled="myForm.$invalid" ng-click="save()">Save</button>
        <button ng-click="changeDateProgramatically()">Change date programatically</button>
    </form>
</div>

JavaScript

var myApp = angular.module("myApp", []);

myApp.controller('myController', function($scope) {
    $scope.model = {};
    
    $scope.showAgeValidationMessage = function(field) {
        return field.$dirty && field.$error.min;
    };
    
    $scope.changeDateProgramatically = function() {
        $scope.model.birthDate = '1/1/2014';
    };
});

myApp.directive('pastDate', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ctrl) {
            function validate (value) {
                var today = new Date();
                today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

                if (new Date(value) < today) {
                    ctrl.$setValidity('pastDate', true);
                    return value;
                }
                ctrl.$setValidity('pastDate', false);
                return value;
            }
            ctrl.$parsers.unshift(validate);
            ctrl.$formatters.unshift(validate)
        }
    };
});