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>[{{thelabel}}]</div>
    <div class='input-group date datepicker_format' id='datepicker'>
        <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 thelabel="testtitle"></div>
</div>

CSS

body {
    padding: 30px;
}

JavaScript

angular.module('myApp', [])
.controller('mainController', function($scope) {
})
.directive('calendarPicker', function() {
    var controller = function ($scope) {
        var vm = this;
        console.log($scope.thelabel);
        $scope.showInfo = function() {
            return 'nnn';
        };
        $('#datepicker').datetimepicker({
            format:'YYYY-MM-DD',
            defaultDate: new Date('2015-09-01'),
            disabledDates: [
                moment("2015-12-25")
            ]
        });   
        
    };

    return {
        restrict: 'A',
        scope: {
            thelabel : '='
        },
        controller: controller,
        controllerAs: 'vm',
        bindToController: true,
        templateUrl: 'templateCalendarPicker'
    };

});