Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.js"></script>
<div ng-controller="ctrl">
    <form name="myForm">
         <input ng-class="{'error-border': myForm.myDate.$error.date}" type="date" name="myDate" ng-model="myDate" date-field />
                  <span ng-show="myForm.myDate.$error.date" class="error">
                      Please enter a valid date!!!
                  </span>             
             <br /> Raw Date: {{myDate}} 
             <br /> Formatted Nicely: {{ myDate | date:'yyyy, MMMM dd'}}    
             <br /> Is Valid Date? {{ !myForm.myDate.$error.date}}
             <br /> Is Form Valid? {{ myForm.$valid }}
    </form>
</div>

CSS

.error {
  color:red;
}
.error-border {
  border: solid 2px red;
}
}

JavaScript

var myApp = angular.module('myApp',[]);
myApp.controller('ctrl', function($scope) {
    $scope.myDate = new Date('2014-03-08T00:00:00');
});
myApp.directive('dateField', function($filter) {
  return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModelController) {
           ngModelController.$parsers.push(function(data) {
              //View -> Model
               console.log(data);
              var date = moment(data, 'YYYY-MM-DD', true);
               
              ngModelController.$setValidity('date', date.isValid());
               return date.isValid() ? date.toDate() : undefined;
           });
           ngModelController.$formatters.push(function(data) {
              //Model -> View
              return $filter('date')(data, "yyyy-MM-dd");
           });    
       }
    }
});