JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="//codeorigin.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div ng-app="mainApp">
    <div ng-controller="mainController">
        <div>{{message}}</div>
        <input id="normal" type="text" />
        <input id="startDate" type="text" ng-model="date" jqdatepicker />
    </div>
</div>

JavaScript

angular.module('mainApp', [])
.controller('mainController', function($scope) {
    $scope.message = 'test111';
    $('#normal').datepicker();
})
.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'DD, d  MM, yy',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }
    };
});