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="date" ng-model="dateInput" date='yyyy-MM-dd' min='2000-01-01' max="2015-12-31">
        </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'] || 'yyyy-MM-dd';
                var minDate = Date.parse(attrs['min']) || 0;
                var maxDate = Date.parse(attrs['max']) || 9007199254740992;

                ctrl.$parsers.unshift(function (viewValue) {
                    var parsedDateMilissec = Date.parse(viewValue);
                    if (parsedDateMilissec > 0) {
                        if (parsedDateMilissec >= minDate && parsedDateMilissec <= maxDate) {
                            ctrl.$setValidity('date', true);
                            return parsedDateMilissec;
                        }
                    }

                    // in all other cases 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();
    }