JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="myApp">
<div ng-controller="MyCtrl">
{{ 1 + 2 }}
<datepicker ng-type="date" date="userInfo.person.mDate" readonly placeholder="From" ShowWeek="true"></datepicker>
</div>
<div id="dp"></div>
</div>
JavaScript
//$(function () {
var RelianceApp = angular.module("relianceApp", []);
RelianceApp.directive('datepicker', function () {
return {
restrict: 'E',
transclude: true,
scope: {
date: '='
},
link: function (scope, element, attrs) {
element.datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
//minDate: 0,
maxDate: "+1Y",
showWeek: attrs.ShowWeek,
showButtonPanel: true,
onSelect: function (dateText, datepicker) {
scope.date = dateText;
scope.$apply();
}
});
},
template: '<input type="text" class="span2" ng-model="date"/>',
replace: true
};
});
//RelianceApp.controller("MyCtrl", function MyCtrl($scope) {
window.MyCtrl = function ($scope) {
$scope.userInfo = {
person: {
mDate: '1967-10-07'
}
};
};
//angular.element(document).ready(function() {
$(function() {
console.log("ready");
var appRootElement = document.getElementById("myApp");
console.log(appRootElement);
angular.bootstrap(appRootElement);
$("#dp").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
//minDate: 0,
maxDate: "+1Y",
showWeek: true,
showButtonPanel: true,
onSelect: function (dateText, datepicker) {
scope.date = dateText;
scope.$apply();
}
}
);
});
//angular.bootstrap(document.getElementById("myApp"));
//});