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 type="text" class="input-small" ng-model="dateFormat" />
    <input class="datepicker" type="text" ng-model="myDate"  mo-medium-date="{{dateFormat}}" />
    <input class="datepicker" type="text" ng-model="myDate"  mo-medium-date="{{dateFormat}}" />
        <p>{{myDate|date:'mediumDate'}}</p>
</div>

JavaScript

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

angModule.directive('moMediumDate', function($filter) {   
  return {
    require: '^ngModel',
    restrict: 'A',    
     link: function(scope, elm, attrs, ctrl) {
          ctrl.$formatters.unshift(function(modelValue) {
              console.log("In formatters" + modelValue);
             return $filter('date')(modelValue);
         });
         ctrl.$parsers.unshift(function(viewValue) {             
             console.log("In Parsers" + modelValue);
             var date = new Date(viewValue);
             return isNaN(date)?"":date;
         });
     }
  };
});
angModule.controller("myCtrl", function($scope, $filter) {    
	$scope.myDate = new Date();
    $scope.dateFormat = "MM/dd/yyyy";
});