Skip to content

Instantly share code, notes, and snippets.

@eugenekgn

eugenekgn/datetimepickerDirective.js

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.
Download ZIP
Raw
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);
})();
Raw
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>
@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 •
edited
Loading

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 •
edited
Loading

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 •
edited
Loading

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 •
edited
Loading

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