JSFiddle - React, Tailwind, and code Playground

by pkozlowski_opensource

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
<div ng-app="dateInput-example">
    <div ng-controller="DateInputCtrl">
        <form name="form">
            <input type="text" ng-model="dateInput" date='yyyy-MM-dd'>
        </form>
        {{dateInput | date:'yyyy-MM-dd'}}
    </div>
</div>

JavaScript

var app = angular.module('dateInput-example', []);
app.directive('date', function(dateFilter) {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {

            var dateFormat = attrs['date'];

            ctrl.$parsers.unshift(function(viewValue) {
                var parsedDateMilissec = Date.parse(viewValue);
                if (parsedDateMilissec > 0) {
                    // it is valid
                    ctrl.$setValidity('date', true);
                    return parsedDateMilissec;
                } else {
                    // it is invalid, return undefined (no model update)
                    ctrl.$setValidity('date', false);
                    return undefined;
                }
            });

            ctrl.$formatters.unshift(function(modelValue) {
                return dateFilter(modelValue, dateFormat);
            });
        }
    };
});

var DateInputCtrl = function($scope) {
    $scope.dateInput = new Date().getTime();
}