Skip to content

Instantly share code, notes, and snippets.

Last active July 17, 2021 08:04
Show Gist options
  • Star 37 You must be signed in to star a gist
  • Fork 17 You must be signed in to fork a gist
  • 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

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