Skip to content

Instantly share code, notes, and snippets.

@eugenekgn
Last active August 27, 2024 20:09
Show Gist options
  • Save eugenekgn/f00c4d764430642dca4b to your computer and use it in GitHub Desktop.
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>
@diosney
Copy link

diosney commented Apr 28, 2015

@pascal0828 Thanks for reporting the issue, I already fixed them using @mwadams solution (thanks!!!)

@diosney
Copy link

diosney commented Apr 28, 2015

@nazirsj It seems to me that you have to load the jQuery plugin into the page, something like:

<script src="vendors/bower_components/moment/min/moment.min.js"></script>
<script src="vendors/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>

@naczu
Copy link

naczu commented Jun 24, 2015

this works fine for me.

app.directive('dDatepicker', function($timeout, $parse) {
        return {
            link: function($scope, element, $attrs) {
                return $timeout(function() {
                    var ngModelGetter = $parse($attrs['ngModel']);

                    return $(element).datetimepicker(
                        {
                            minDate:moment().add(1, 'd').toDate(),
                            sideBySide:true,
                            allowInputToggle:true,
                            locale:"tr",
                            useCurrent:false,
                            defaultDate:moment().add(1, 'd').add(1,'h'),
                            icons:{
                                time: 'icon-back-in-time',
                                date: 'icon-calendar-outlilne',
                                up: 'icon-up-open-big',
                                down: 'icon-down-open-big',
                                previous: 'icon-left-open-big',
                                next: 'icon-right-open-big',
                                today: 'icon-bullseye',
                                clear: 'icon-cancel'
                            }
                        }
                    ).on('dp.change', function(event) {
                            $scope.$apply(function() {
                                return ngModelGetter.assign($scope, event.target.value);
                            });
                    });
                });
            }
        };
    });

@cloidjgreen
Copy link

I found the language element to not be working properly. Removed it in all locations of HTML and js code and it works.

Will keep digging as I need locale aware code.

This is not a complaint, just a comment.

Nice work

Thanks

And I just bore down into moment and found that 'en' is not a language, 'en-gb' will work so the code implemented flawlessly

@bramcordie
Copy link

@cloidjgreen It's probably a version thing but I had to use locale instead of language to translate the UI.

I also need the dutch (nl) translations and managed to include them using grunt and wiredep by overwriting the main files in my Grunt-file like so:

wiredep: {
  options: {
    'overrides': {
      'moment': {
        'main': [
          'moment.js',
          'locale/nl.js'
        ]
      }
    }
  }
}

@ralvarezalonso
Copy link

@diosney thanks a lot for the wrapper!
How could I make the datepicker appear not when the user clicks on the input, but when clicks on the calendar icon?

UPDATED: I managed to do it following mwadams's solution. Thank you to both of you!

@atais
Copy link

atais commented Oct 16, 2015

Out of all of above I recommend @mwadams solution.

@SandeepThomas
Copy link

How to make the datepicker appear on clicking calendar icon by using the official directive?

@atais
Copy link

atais commented Nov 10, 2015

I combined @mwadams and @diosney solution into this nice plnker :) happy using
http://plnkr.co/n8L8UZ

Since the previous project has been abandoned I have created a fork and pushed all the changes there.
https://github.com/atais/angular-eonasdan-datetimepicker

@JiriMachacek
Copy link

@atais plunker not found :(

@JiriMachacek
Copy link

@atais now it works. THX

@dotku
Copy link

dotku commented Dec 15, 2015

useCurrent() expects a string parameter of year, month, day, hour, minute

@dodonnell12
Copy link

@atais

Using your code doesn't allow the datetimepicker sideBySide: true attribute to work now. Any suggestions?

$(function () {
        $('#datetimepicker1').datetimepicker({
            sideBySide: true
        });
    });

Figured it out. Add sideBySide: true into the vm.options. Like this.
vm.options = '{format:"DD.MM.YYYY HH:mm", sideBySide: true}'

Also if you need the AM PM formatting remove the format option completely. Like this.
vm.options = '{sideBySide: true}

@leguin
Copy link

leguin commented Feb 6, 2016

@atais
Thanks, it works great.
Small issue, maybe you can suggest how to solve it.
When I am trying to navigate with the left and right keys inside of input and datetimepicker is closed, it doesn't always work as expected.

You have repro in your plunkr: http://plnkr.co/kNqCuQ

Any suggestion ?

@atais
Copy link

atais commented Feb 9, 2016

@leguin it because left-right arrow is also captured by the datepicker to navigate over the calendar. It is not a wrapper's, but library's fault.

@penndai
Copy link

penndai commented Jun 17, 2016

Do you support angular 2? It is hard to find any adaptable time picker for the new angular 2 online.

@GBurlakova
Copy link

GBurlakova commented Jul 8, 2016

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

@gitsubham
Copy link

gitsubham commented Jul 13, 2016

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 ?

@crohit92
Copy link

crohit92 commented Jan 23, 2017

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

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.

@shamoh19
Copy link

any update on how to integrate with Angular2?

@nalex-macaroni
Copy link

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!

@eprislac
Copy link

eprislac commented Sep 20, 2017

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