Skip to content

Instantly share code, notes, and snippets.

Last active July 17, 2021 08:04
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(){
$scope.$on('emit:dateTimePicker', function (e, value) {
$scope.vm.dateTime = value.dateTime;
var dateTimePicker = function ($rootScope) {
return {
require: '?ngModel',
restrict: 'AE',
scope: {
pick12HourFormat: '@',
language: '@',
useCurrent: '@',
location: '@'
link: function (scope, elem, attrs) {
pick12HourFormat: scope.pick12HourFormat,
language: scope.language,
useCurrent: scope.useCurrent
//Local event change
elem.on('blur', function () {'this', this);'scope', scope);'attrs', attrs);
/*// returns moments.js format object
scope.dateTime = new Date("DateTimePicker").getDate().format());
// Global change propagation
$rootScope.$broadcast("emit:dateTimePicker", {
location: scope.location,
action: 'changed',
dateTime: scope.dateTime,
example: scope.useCurrent
angular.module('dateTimeSandbox', []).run(['$rootScope', function ($rootScope) {
}]).controller('dateTimeController', ['$scope', '$http', dateTimeController
]).directive('dateTimePicker', dateTimePicker);
<html ng-app="dateTimeSandbox">
<meta charset='utf-8'/>
<title>DatePicker Directive</title>
<link rel="stylesheet" href="">
<link rel="stylesheet"
<div class="container" ng-controller="dateTimeController">
<div class="row">
<div class='col-sm-6'>
<h1> {{vm.message}}</h1>
<div class="form-group">
<label class="label label-info">DateTimePicker</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
<label class="label label-info">DateTimePicker (Angular Directive)</label>
<input type="text"
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></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 () {
language: 'ru',
useCurrent: false
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!

Copy link

atais commented Oct 16, 2015

Out of all of above I recommend @mwadams solution.

Copy link

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

Copy link

atais commented Nov 10, 2015

I combined @mwadams and @diosney solution into this nice plnker :) happy using

Since the previous project has been abandoned I have created a fork and pushed all the changes there.

Copy link

@atais plunker not found :(

Copy link

@atais now it works. THX

Copy link

dotku commented Dec 15, 2015

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

Copy link


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

$(function () {
            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}

Copy link

leguin commented Feb 6, 2016

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:

Any suggestion ?

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.

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.

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

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 ?

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


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.

Copy link

any update on how to integrate with Angular2?

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!

Copy link

eprislac commented Sep 20, 2017

I switched things up a bit and made a component instead of a directive wrapper:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment