mwadams/datetimepickerDirective.js

## datetimepickerDirective.js
(function () {
    var dateTimeController = function ($scope, $rootScope) {
        $scope.vm = {
            message: "Bootstrap DateTimePicker Directive",
            dateTime: {}
        };

        $scope.$watch('change', function(){
            console.log($scope.vm.dateTime);
        });


        /*
           $scope.$on('emit:dateTimePicker', function (e, value) {
           $scope.vm.dateTime = value.dateTime;
           console.log(value);
           })
        */
    };
    var dateTimePicker = function ($rootScope) {

        return {
            require: '?ngModel',
            restrict: 'AE',
            scope: {
                pick12HourFormat: '@',
                language: '@',
                useCurrent: '@',
                location: '@'
            },
            link: function (scope, elem, attrs) {
                elem.datetimepicker({
                    pick12HourFormat: scope.pick12HourFormat,
                    language: scope.language,
                    useCurrent: scope.useCurrent
                })

                //Local event change
                elem.on('blur', function () {

                    console.info('this', this);
                    console.info('scope', scope);
                    console.info('attrs', attrs);


                    /*// returns moments.js format object
                    scope.dateTime = new Date(elem.data("DateTimePicker").getDate().format());
                    // Global change propagation

                    $rootScope.$broadcast("emit:dateTimePicker", {
                        location: scope.location,
                        action: 'changed',
                        dateTime: scope.dateTime,
                        example: scope.useCurrent
                    });
                    scope.$apply();*/
                })
            }
        };
    }

    angular.module('dateTimeSandbox', []).run(['$rootScope', function ($rootScope) {
    }]).controller('dateTimeController', ['$scope', '$http', dateTimeController
    ]).directive('dateTimePicker', dateTimePicker);
})();

## index.html
<html ng-app="dateTimeSandbox">
<head>
    <meta charset='utf-8'/>
    <title>DatePicker Directive</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="http://eonasdan.github.io/bootstrap-datetimepicker/content/bootstrap-datetimepicker.css">
</head>
<body>


<div class="container" ng-controller="dateTimeController">
    <div class="row">
        <div class='col-sm-6'>
            <h1> {{vm.message}}</h1>

            <div class="form-group">

            </div>
            <label class="label label-info">DateTimePicker</label>
            <br/>

            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control"/>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
            </div>

            <br/>
            <label class="label label-info">DateTimePicker (Angular Directive)</label>

            <br/>
            <input type="text"
                   class="form-control"
                   ng-model="vm.dateTime"
                   data-date-time-picker
                   data-language="{{ru}}"
                   data-pick12HourFormat="false"
                   data-use-current="{{false}}"
                   data-location="{{testProject}}"
                    />
            <br/>
            <pre>{{vm|json}}</pre>

        </div>
    </div>
</div>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/moment/min/moment.min.js"></script>
<script type="text/javascript" src="build\js\bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="angularjs/angular.js"></script>
<script type="text/javascript" src="js/datetimepickerDirective.js"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker({
            language: 'ru',
            useCurrent: false
        });
    });
</script>
</body>
</html>
	(function () {
	var dateTimeController = function ($scope, $rootScope) {
	$scope.vm = {
	message: "Bootstrap DateTimePicker Directive",
	dateTime: {}
	};

	$scope.$watch('change', function(){
	console.log($scope.vm.dateTime);
	});


	/*
	$scope.$on('emit:dateTimePicker', function (e, value) {
	$scope.vm.dateTime = value.dateTime;
	console.log(value);
	})
	*/
	};
	var dateTimePicker = function ($rootScope) {

	return {
	require: '?ngModel',
	restrict: 'AE',
	scope: {
	pick12HourFormat: '@',
	language: '@',
	useCurrent: '@',
	location: '@'
	},
	link: function (scope, elem, attrs) {
	elem.datetimepicker({
	pick12HourFormat: scope.pick12HourFormat,
	language: scope.language,
	useCurrent: scope.useCurrent
	})

	//Local event change
	elem.on('blur', function () {

	console.info('this', this);
	console.info('scope', scope);
	console.info('attrs', attrs);


	/*// returns moments.js format object
	scope.dateTime = new Date(elem.data("DateTimePicker").getDate().format());
	// Global change propagation

	$rootScope.$broadcast("emit:dateTimePicker", {
	location: scope.location,
	action: 'changed',
	dateTime: scope.dateTime,
	example: scope.useCurrent
	});
	scope.$apply();*/
	})
	}
	};
	}

	angular.module('dateTimeSandbox', []).run(['$rootScope', function ($rootScope) {
	}]).controller('dateTimeController', ['$scope', '$http', dateTimeController
	]).directive('dateTimePicker', dateTimePicker);
	})();
	<html ng-app="dateTimeSandbox">
	<head>
	<meta charset='utf-8'/>
	<title>DatePicker Directive</title>
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet"
	href="http://eonasdan.github.io/bootstrap-datetimepicker/content/bootstrap-datetimepicker.css">
	</head>
	<body>


	<div class="container" ng-controller="dateTimeController">
	<div class="row">
	<div class='col-sm-6'>
	<h1> {{vm.message}}</h1>

	<div class="form-group">

	</div>
	<label class="label label-info">DateTimePicker</label>
	<br/>

	<div class='input-group date' id='datetimepicker1'>
	<input type='text' class="form-control"/>
	<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
	</span>
	</div>

	<br/>
	<label class="label label-info">DateTimePicker (Angular Directive)</label>

	<br/>
	<input type="text"
	class="form-control"
	ng-model="vm.dateTime"
	data-date-time-picker
	data-language="{{ru}}"
	data-pick12HourFormat="false"
	data-use-current="{{false}}"
	data-location="{{testProject}}"
	/>
	<br/>
	<pre>{{vm\|json}}</pre>

	</div>
	</div>
	</div>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="node_modules/moment/min/moment.min.js"></script>
	<script type="text/javascript" src="build\js\bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="angularjs/angular.js"></script>
	<script type="text/javascript" src="js/datetimepickerDirective.js"></script>
	<script type="text/javascript">
	$(function () {
	$('#datetimepicker1').datetimepicker({
	language: 'ru',
	useCurrent: false
	});
	});
	</script>
	</body>
	</html>