Skip to content

Commit 3e1647f

Browse files
Michał Siatkowskiatais
Michał Siatkowski
authored and
atais
committed
directive can be used from both input and input-group
1 parent 20b1b82 commit 3e1647f

7 files changed

+168
-19
lines changed

‎README.md

+29-8
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,13 @@ angular.module('myApp', ['ae-datetimepicker']);
3030
* Simple example, with one datetimepicker: http://plnkr.co/n8L8UZ
3131
* Example with two, linked datetimepickers: http://plnkr.co/ZSjN8f
3232
* Validation example: http://plnkr.co/NmFt43
33+
* From/To validation example: http://plnkr.co/ZeKX7z
3334

34-
## Parameters
35+
## Directive usage
3536

36-
### ng-model
37-
38-
Simply add `datetimepicker` tag and pass the `ng-model` attribute. <br>
39-
If `ng-model` is `null` or `undefined`, the initial value will not be set!
37+
Simply add `datetimepicker` tag and add the `ng-model` (required) attribute. Currently the `datetimepicker` tag can be added on either `input-group` or the `input`.
4038

39+
Option #1
4140
```html
4241
<div class="input-group" datetimepicker ng-model="vm.date">
4342
<input type="text" class="form-control"/>
@@ -47,6 +46,28 @@ If `ng-model` is `null` or `undefined`, the initial value will not be set!
4746
</div>
4847
```
4948

49+
Option #2
50+
```html
51+
<div class="input-group">
52+
<input type="text" class="form-control" datetimepicker ng-model="vm.date"/>
53+
<span class="input-group-addon">
54+
<span class="glyphicon glyphicon-calendar"></span>
55+
</span>
56+
</div>
57+
```
58+
59+
In both cases the directive will work exactly the same. Also triggering the callendar with the icon in `span` will work in both cases.
60+
61+
**However** if you wish to use a custom validation directive, you probably would want to add the directive in `input` element. <br>
62+
See the: [From/To validation example](http://plnkr.co/ZeKX7z)
63+
64+
65+
## Parameters
66+
67+
### ng-model
68+
69+
If `ng-model` is `null` or `undefined`, the initial value will not be set!
70+
5071
### options
5172

5273
With `options` attribute you can pass an object containing all the required configuration for your datetimepicker.
@@ -66,7 +87,7 @@ vm.options = {
6687
### on-change
6788

6889
You can pass a function that will be called every time the value of datetimepicker is changed. <br>
69-
See: http://plnkr.co/ZSjN8f (Example with two, linked datetimepickers) as an example.
90+
See: [Example with two, linked datetimepickers](http://plnkr.co/ZSjN8f)
7091

7192
Detailed description of event: http://eonasdan.github.io/bootstrap-datetimepicker/Events/#dpchange
7293

@@ -75,8 +96,8 @@ Detailed description of event: http://eonasdan.github.io/bootstrap-datetimepicke
7596
You can pass a function that will be called every time the datetimepicker is clicked. <br>
7697
The event occurs when you open or close the datetimepicker.
7798

78-
## Limitations
99+
## Special thanks
79100

80-
Currently, form validation works only if you put the directive around `input` element and not the whole `input-group`.
101+
* [Rodrigo Saling](https://github.com/rodrigosaling) for help on making custom validators work
81102

82103
## [License](https://github.com/atais/angular-eonasdan-datetimepicker/blob/master/LICENSE)

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-eonasdan-datetimepicker",
3-
"version": "0.3.4",
3+
"version": "0.3.5",
44
"authors": [
55
"Atais <atais.jr@gmail.com>"
66
],

‎dist/angular-eonasdan-datetimepicker.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,24 @@
1515
onClick: '&?'
1616
},
1717
link: function ($scope, $element, $attrs, ngModel) {
18-
18+
var dpElement = $element.parent().hasClass('input-group') ? $element.parent() : $element;
19+
1920
$scope.$watch('options', function (newValue) {
20-
var dtp = $element.data('DateTimePicker');
21+
var dtp = dpElement.data('DateTimePicker');
2122
$.map(newValue, function (value, key) {
2223
dtp[key](value);
2324
});
2425
});
2526

2627
ngModel.$render = function () {
2728
if (!!ngModel.$viewValue) {
28-
$element.data('DateTimePicker').date(ngModel.$viewValue);
29+
dpElement.data('DateTimePicker').date(ngModel.$viewValue);
2930
} else {
30-
$element.data('DateTimePicker').date(null);
31+
dpElement.data('DateTimePicker').date(null);
3132
}
3233
};
3334

34-
$element.on('dp.change', function (e) {
35+
dpElement.on('dp.change', function (e) {
3536
$timeout(function () {
3637
if (!!e.date) {
3738
$scope.$apply(function () {
@@ -44,21 +45,21 @@
4445
});
4546
});
4647

47-
$element.on('click', function () {
48+
dpElement.on('click', function () {
4849
$timeout(function () {
4950
if (typeof $scope.onClick === "function") {
5051
$scope.onClick();
5152
}
5253
});
5354
});
5455

55-
$element.datetimepicker($scope.options);
56+
dpElement.datetimepicker($scope.options);
5657
$timeout(function () {
5758
if (!!ngModel.$viewValue) {
5859
if (!(ngModel.$viewValue instanceof moment)) {
5960
ngModel.$setViewValue(moment($scope.date));
6061
}
61-
$element.data('DateTimePicker').date(ngModel.$viewValue);
62+
dpElement.data('DateTimePicker').date(ngModel.$viewValue);
6263
}
6364
});
6465
}

‎dist/angular-eonasdan-datetimepicker.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/double-validation.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>angular-eonasdan-datetimepicker</title>
7+
8+
<!-- bower:css -->
9+
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
10+
<link rel="stylesheet"
11+
href="../bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">
12+
<!-- endinject -->
13+
</head>
14+
15+
<body ng-app="plunker">
16+
17+
<div ng-controller="controller as vm">
18+
19+
<div class="well">
20+
<h3>Angular-eonasdan-datetimepicker</h3>
21+
<p style="margin: -10px 0 0 0;">
22+
https://github.com/atais/angular-eonasdan-datetimepicker</p>
23+
<br>
24+
25+
<form name="dates_form">
26+
<div class="row">
27+
<div class="col-md-3">
28+
<div class="form-group" ng-class="{ 'has-error': dates_form.dateFrom.$invalid }">
29+
<label for="dateFrom">From</label>
30+
<div class="input-group">
31+
<input type="text" name="dateFrom" id="dateFrom" class="form-control"
32+
datetimepicker ng-model="vm.dateFrom" options="vm.options"
33+
validate-before="dates_form.dateTo">
34+
<span class="input-group-addon">
35+
<span class="glyphicon glyphicon-calendar"></span>
36+
</span>
37+
</div>
38+
</div>
39+
</div>
40+
<div class="col-md-3">
41+
<div class="form-group" ng-class="{ 'has-error': dates_form.dateTo.$invalid }">
42+
<label for="dateTo">To</label>
43+
<div class="input-group">
44+
<input type="text" name="dateTo" id="dateTo" class="form-control"
45+
datetimepicker ng-model="vm.dateTo" options="vm.options"
46+
validate-after="dates_form.dateFrom">
47+
<span class="input-group-addon">
48+
<span class="glyphicon glyphicon-calendar"></span>
49+
</span>
50+
</div>
51+
</div>
52+
</div>
53+
54+
</div>
55+
</form>
56+
</div>
57+
58+
</div>
59+
60+
<!-- bower:js -->
61+
<script src="../bower_components/jquery/dist/jquery.js"></script>
62+
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
63+
<script src="../bower_components/moment/moment.js"></script>
64+
<script src="../bower_components/angular/angular.js"></script>
65+
<script src="../bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
66+
<!-- endinject -->
67+
<script src="../dist/angular-eonasdan-datetimepicker.js"></script>
68+
<script src="double-validation.js"></script>
69+
</body>
70+
</html>

‎examples/double-validation.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
(function () {
2+
'use strict';
3+
4+
angular.module('plunker', ['ae-datetimepicker'])
5+
.controller('controller', [function () {
6+
var vm = this;
7+
8+
vm.options = {
9+
format: 'MM/DD/YYYY HH:mm',
10+
useCurrent: false
11+
};
12+
}]);
13+
14+
15+
angular
16+
.module('plunker')
17+
.directive('validateBefore', validateBefore);
18+
19+
angular
20+
.module('plunker')
21+
.directive('validateAfter', validateAfter);
22+
23+
24+
function validateBefore() {
25+
return {
26+
restrict: "A",
27+
require: "?ngModel",
28+
link: function ($scope, $element, $attrs, ngModel) {
29+
ngModel.$validators.validateBefore = function (modelValue) {
30+
var compareTo = $scope.$eval($attrs.validateBefore).$viewValue;
31+
if (!!modelValue) {
32+
return modelValue.isBefore(compareTo)
33+
} else {
34+
return true;
35+
}
36+
};
37+
}
38+
};
39+
}
40+
41+
function validateAfter() {
42+
return {
43+
restrict: "A",
44+
require: "?ngModel",
45+
link: function ($scope, $element, $attrs, ngModel) {
46+
ngModel.$validators.validateAfter = function (modelValue) {
47+
var compareTo = $scope.$eval($attrs.validateAfter).$viewValue;
48+
if (!!modelValue) {
49+
return modelValue.isAfter(compareTo)
50+
} else {
51+
return true;
52+
}
53+
};
54+
}
55+
};
56+
}
57+
})();

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-eonasdan-datetimepicker",
3-
"version": "0.3.4",
3+
"version": "0.3.5",
44
"author": {
55
"name": "Michał Siatkowski",
66
"email": "atais.jr@gmail.com"

0 commit comments

Comments
 (0)