Skip to content

Instantly share code, notes, and snippets.

@hawlik

hawlik/datetimepickerDirective.js

Forked from eugenekgn/datetimepickerDirective.js
Last active August 29, 2015 14:27
Show Gist options
  • Save hawlik/49c38b99f18bcec00001 to your computer and use it in GitHub Desktop.
Save hawlik/49c38b99f18bcec00001 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment