Last active
August 27, 2024 20:09
-
-
Save eugenekgn/f00c4d764430642dca4b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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); | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
I switched things up a bit and made a component instead of a directive wrapper:
https://gist.github.com/eprislac/9b1f7d9f172bb3447be848a36a27af7d
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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!