JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/locales/bootstrap-datepicker.de.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
<div ng-controller="mainController">
<div class="form-group">
<div class='input-group date' timepicker ng-model="date1">
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<div>{{date1 | date:'yyyy-MM-dd HH:mm'}}</div>
</div>
<div class="form-group">
<div class='input-group date' timepicker ng-model="date2">
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<div>{{date2 | date:'yyyy-MM-dd HH:mm'}}</div>
</div>
</div>
CSS
body {
padding: 30px;
}
JavaScript
angular.module('myApp', [])
.controller('mainController', function($scope) {
$scope.date1 = '2015-09-01 00:00';
$scope.date2 = '2015-09-30 23:59';
})
.directive('timepicker', [
function() {
var link;
link = function(scope, element, attr, ngModel) {
console.log(ngModel);
element = $(element);
element.datetimepicker({
format: 'YYYY-MM-DD HH:mm',
defaultDate: ngModel.$viewValue
});
element.on('dp.change', function(event) {
scope.$apply(function() {
ngModel.$setViewValue(event.date._d);
});
});
};
return {
restrict: 'A',
link: link,
require: 'ngModel'
};
}
])