Angular:Input Fields Fiddle

http://angularjs.org/

by gogirl

HTML

<div ng-controller="MyCtrl">
    <p>Using var birthday: {{birthday}}!</p>
    <p>Using custom filter date: {{birthday| date}}!</p>
    <p>You were born at {{birthday|date:'shortTime' }} on {{birthday|date:'mediumDate' }}!</p>
    <br />Enter your birthday1:
    <br />
    <input ng-model="birthday" size="60"  />
    <br />Enter your birthday2 using custom date filter:
    <input type="text" ng-model="birthday"  size="35"  date="dd/mm/yyyy">
    <br />Enter your time of birth:  
   <input  ng-model="birthday" date='hh:mm'>
    <br />
     <br />
         <br />
    <br />
    <br />
    <p>Challenge: It lacks proper date validation. To get Databinding in birthday2 so it behaves like birthday1 requires that you refresh by pressing the run button. How do i force a refresh?
        <br />Next step: http://plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview</p>
    <br />
    <p>http://jsfiddle.net/ricardohbin/9LMFT/</p>
    <br />
    <p>http://docs.angularjs.org/api/ng.filter:date</p>
        <div/>

JavaScript

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

function MyCtrl($scope) {

    $scope.birthday = new Date("2012-09-01T00:00:00.000Z");
}

myApp.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);
            });
        }
    };
});