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='datepicker' 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"></div>
    <div>The selected date is <b>{{date1}}</b>.</div>
</div>

CSS

body {
    padding: 30px;
}

JavaScript

angular.module('myApp', [])
.controller('mainController', function($scope) {
    $scope.date1 = '2015-09-19';
})
.directive('calendarPicker', function() {
    var controller = function ($scope) {
        var vm = this;
        var dp22222 = $('#datepicker').datetimepicker({
            format:'YYYY-MM-DD',
            defaultDate: new Date($scope.date)
        });
        
        $(document).on('dp.change', '#datepicker', function (a) {
            var selected_date = moment(a.date._d).format('YYYY-MM-DD');
            $scope.date = selected_date;
            $scope.$apply();
        });

        
    };

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