JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">

<input id="dp" type="text" ng-model="userInfo.person.mDate" name="mDate" my-datepicker/>

    <pre>{{userInfo.person.mDate}}</pre>

</div>

JavaScript

var myApp = angular.module('myApp', []);
      
myApp.directive('myDatepicker', function () {
    return {
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
            $(function(){
                element.datepicker({
                    showOn:"both",
                    changeYear:true,
                    changeMonth:true,
                    dateFormat:'yy-mm-dd',
                    maxDate: new Date(),
                    yearRange: '1920:2012',
                    onSelect:function (dateText, inst) {
                        ngModelCtrl.$setViewValue(dateText);
                        scope.$apply();
                    }
                });
            });
        }
    }
});


function MyCtrl($scope) {

    $scope.userInfo = {
        person: {
            mDate: '1967-10-07'
        }
    };
    
}