JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<div ng-controller="myCtrl">
    <input class="datepicker" type="text" ng-model="myDate"  />
    <input class="datepicker" type="text" ng-model="myDate" mo-medium-date />
        <p>{{myDate|date:'mediumDate'}}</p>
</div>

JavaScript

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

angModule.directive('moMediumDate', function($filter) {   
  return {
    require: 'ngModel',
     link: function(scope, elm, attrs, ctrl) {
          ctrl.$formatters.unshift(function(modelValue) {             
             return $filter('date')(modelValue);
         });
         ctrl.$parsers.unshift(function(viewValue) {             
             var date = new Date(viewValue);
             return isNaN(date)?"":date;
         });
     }
  };
});
angModule.controller("myCtrl", function($scope, $filter) {    
	$scope.myDate = new Date();
});