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>
<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
              var date = Date.parseExact(data,'yyyy-MM-dd');
              ngModelController.$setValidity('date', date!=null);
              return date;
           });
           ngModelController.$formatters.push(function(data) {
              //Model -> View
              return $filter('date')(data, "yyyy-MM-dd");
           });    
       }
    }
});