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="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/ng-template" id="templateCalendarPicker">
    <div class='input-group date datepicker_format' id="{{dpid}}" style="width:{{width}}px">
        <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>	
</script>

<div ng-controller="mainController">
    <div calendar-picker width="200" date="date1" dpid="d1"></div>
    <div>The first date is <b>{{date1}}</b>.</div>
</div>

<div ng-controller="mainController">
    <div calendar-picker width="200" date="date2" dpid="d2"></div>
    <div>The second date is <b>{{date2}}</b>.</div>
</div>

CSS

body {
    padding: 30px;
}

JavaScript

angular.module('myApp', [])
.controller('mainController', function($scope) {
    $scope.date1 = '2015-09-01';
    $scope.date2 = '2015-09-30';
})
.directive('calendarPicker', function() {
    var controller = function ($scope) {
        var vm = this;
        $('#datepicker').datetimepicker({
            format:'YYYY-MM-DD',
            defaultDate: new Date($scope.date)
        });
        
        var elemId = '#'+$scope.dpid;
        console.log(elemId);
        
        $(document).on('dp.change', elemId, function (a) {
            var selected_date = moment(a.date._d).format('YYYY-MM-DD');
            $scope.date = selected_date;
            $scope.$apply();
        });
        
        $scope.$on('$destroy', function() {
        	$('#datepicker').data("DateTimePicker").destroy();
        });        
    };

    return {
        restrict: 'A',
        scope: {
            date : '=',
            width : '@',
            dpid : '@'
        },
        controller: controller,
        controllerAs: 'vm',
        bindToController: true,
        templateUrl: 'templateCalendarPicker'
    };
});