JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

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="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<div ng-controller="mainController">
   	<div class="form-group">
		<div class='input-group date' timepicker  ng-model="date">
            <input type='text' class="form-control" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>				
        ng-model value: {{date}}
	</div>
</div>

CSS

body {
    padding: 30px;
}

JavaScript

angular.module('myApp', [])
.controller('mainController', function($scope) {
    $scope.date = moment();
})
.directive('timepicker', [

  function() {
    var link;
    link = function(scope, element, attr, ngModel) {
       element = $(element);
      element.datetimepicker();
      element.on('dp.change', function(event) {
        console.log("scope obj below");
        console.log(scope);
        console.log("ngModel obj below");
        console.log(ngModel);
        //need to run digest cycle for applying bindings
        scope.$apply(function() {
          ngModel.$setViewValue(event.date);
        });
      });
    };

    return {
      restrict: 'A',
      link: link,
      require: 'ngModel'
    };
  }
])