JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="well">
<div ng-app="datapp" ng-controller="MyController">
<datepicker ng-model="date"></datepicker><br>
{{sometest}}<br>
{{date}}
</div>
</div>
JavaScript
angular.module('datapp', [])
.directive('datepicker', function() {
var datePickertemplate = '<div class="input-append"><input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input><span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div>';
return {
restrict: 'E',
compile:function(tElement, tAttrs, transclude){
var datePickerElement = angular.element(datePickertemplate);
tElement.replaceWith(datePickerElement);
return function (scope, element, attr) {
element.datetimepicker({
language: 'en',
pick12HourFormat: true
});
}
}
};
})
function MyController($scope) {
$scope.sometest = "Controller is working...";
$scope.date = "";
}