-
-
Save eugenekgn/f00c4d764430642dca4b to your computer and use it in GitHub Desktop.
| (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> |
Yes, do you support angular2? I am currently trying to integrate the datetimepicker with an angular2 application but I get an error as follows TypeError: Cannot read property 'addClass' of undefined
how to require it as npm package ?
we are using eonasdan-bootstrap-datetimepicker-npm. and after that, we are requiring it as follows
require ('eonasdan-bootstrap-datetimepicker-npm')
also we have tried
require ('bootstrap-datetimepicker')
What are we doing incorrectly ?
The directive does not work correctly, it does not perform two way data binding, to fix the issue i modified it a bit and added another scope model in the directive, see the attached image
I have added ngModel in the directive to receive a model, and it is updates whenever the value in the directive updates, i.e. in the on blur event.
any update on how to integrate with Angular2?
This worked pretty nicely out of the box - My only issue is that I can't seem to connect two together to get a date range. I tried to get the minDate option to react to the first picker's model, but it didn't like that...tried $( "#picker2ID" ).minDate() - doesn't work..etc.. Any ideas how this can work? Thanks!
I switched things up a bit and made a component instead of a directive wrapper:
https://gist.github.com/eprislac/9b1f7d9f172bb3447be848a36a27af7d
Do you support angular 2? It is hard to find any adaptable time picker for the new angular 2 online.