├── .gitignore
├── LICENSE
├── README.md
├── angular-bootstrap-datetimepicker-directive.js
├── angular-bootstrap-datetimepicker-directive.min.js
├── bower.json
└── example.html
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | .idea
3 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Diosney Sarmiento
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # angular-bootstrap-datetimepicker-directive
2 |
3 | A wrapper directive around the [bootstrap-datetimepicker component](http://eonasdan.github.io/bootstrap-datetimepicker/).
4 |
5 | ## How to Use
6 |
7 | 1- Install the directive via bower (or download it manually, as you prefer)
8 |
9 | bower install angular-bootstrap-datetimepicker-directive --save
10 |
11 | 2- Load all required scripts by `eonasdan-bootstrap-datetimepicker`.
12 | Refer to the [official guide](http://eonasdan.github.io/bootstrap-datetimepicker/Installing/).
13 |
14 | 3- Include the `angular-bootstrap-datetimepicker-directive.js` into your HTML.
15 | A minified variant is provided for production named `angular-bootstrap-datetimepicker-directive.min.js`.
16 |
17 | 4- Inject the `datetimepicker` directive in you angular app:
18 |
19 | angular
20 | .module('myApp', [
21 | // Other injected modules.
22 |
23 | 'datetimepicker'
24 | ]);
25 |
26 | 5- You can start using the directive in your HTML in several ways like:
27 |
28 | a) Passing in a JSON object with the options
29 | ```html
30 |
38 | ```
39 | b) Passing in an angular scoped variable that holds the options
40 |
41 | ```html
42 |
50 | ```
51 | c) Set the default options with the provider and use the datepicker with those
52 | default options.
53 |
54 | ```html
55 |
62 |
63 |
79 | ```
80 |
81 | All options are named identically with the same letter case.
82 |
83 | ## Supported `eonasdan-bootstrap-datetimepicker` options
84 |
85 | All of them :) If you find anyone that is causing havoc file an issue. Please,
86 | first test that is the directive and not the original jQuery plugin which is
87 | causing it.
88 |
89 | ## Setting default values for all datetimepickers
90 |
91 | Use the `datetimepickerProvider` to set them
92 |
93 |
109 |
110 | Those default options will be overwritten by the provided in the inline definition.
111 |
112 | ## Why passing an unified JSON and not option by option?
113 |
114 | Just one word: **simplicity**.
115 |
116 | The option by option variant have a lot of related issues, one of them is that
117 | the directive has to know every single option of the original plugin, how to parse
118 | it, how to include it into the directive with the isolated scope and so on.
119 | Besides, this limit future options since have to be added too.
120 |
121 | There are a lot more but that isn't the goal of this README after all, so I won't
122 | do a full enumeration of them.
123 |
124 | ## License
125 |
126 | The MIT License (MIT)
127 |
128 | Copyright (c) 2015 Diosney Sarmiento
129 |
130 | Permission is hereby granted, free of charge, to any person obtaining a copy
131 | of this software and associated documentation files (the "Software"), to deal
132 | in the Software without restriction, including without limitation the rights
133 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
134 | copies of the Software, and to permit persons to whom the Software is
135 | furnished to do so, subject to the following conditions:
136 |
137 | The above copyright notice and this permission notice shall be included in
138 | all copies or substantial portions of the Software.
139 |
140 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
141 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
142 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
143 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
144 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
145 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
146 | THE SOFTWARE.
147 |
--------------------------------------------------------------------------------
/angular-bootstrap-datetimepicker-directive.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular
4 | .module('datetimepicker', [])
5 |
6 | .provider('datetimepicker', function () {
7 | var default_options = {};
8 |
9 | this.setOptions = function (options) {
10 | default_options = options;
11 | };
12 |
13 | this.$get = function () {
14 | return {
15 | getOptions: function () {
16 | return default_options;
17 | }
18 | };
19 | };
20 | })
21 |
22 | .directive('datetimepicker', [
23 | '$timeout',
24 | 'datetimepicker',
25 | function ($timeout,
26 | datetimepicker) {
27 |
28 | var default_options = datetimepicker.getOptions();
29 |
30 | return {
31 | require : '?ngModel',
32 | restrict: 'AE',
33 | scope : {
34 | datetimepickerOptions: '@'
35 | },
36 | link : function ($scope, $element, $attrs, ngModelCtrl) {
37 | var passed_in_options = $scope.$eval($attrs.datetimepickerOptions);
38 | var options = jQuery.extend({}, default_options, passed_in_options);
39 |
40 | $element
41 | .on('dp.change', function (e) {
42 | if (ngModelCtrl) {
43 | $timeout(function () {
44 | ngModelCtrl.$setViewValue(e.target.value);
45 | });
46 | }
47 | })
48 | .datetimepicker(options);
49 |
50 | function setPickerValue() {
51 | var date = options.defaultDate || null;
52 |
53 | if (ngModelCtrl && ngModelCtrl.$viewValue) {
54 | date = ngModelCtrl.$viewValue;
55 | }
56 |
57 | $element
58 | .data('DateTimePicker')
59 | .date(date);
60 | }
61 |
62 | if (ngModelCtrl) {
63 | ngModelCtrl.$render = function () {
64 | setPickerValue();
65 | };
66 | }
67 |
68 | setPickerValue();
69 | }
70 | };
71 | }
72 | ]);
--------------------------------------------------------------------------------
/angular-bootstrap-datetimepicker-directive.min.js:
--------------------------------------------------------------------------------
1 | "use strict";angular.module("datetimepicker",[]).provider("datetimepicker",function(){var default_options={};this.setOptions=function(options){default_options=options};this.$get=function(){return{getOptions:function(){return default_options}}}}).directive("datetimepicker",["$timeout","datetimepicker",function($timeout,datetimepicker){var default_options=datetimepicker.getOptions();return{require:"?ngModel",restrict:"AE",scope:{datetimepickerOptions:"@"},link:function($scope,$element,$attrs,ngModelCtrl){var passed_in_options=$scope.$eval($attrs.datetimepickerOptions);var options=jQuery.extend({},default_options,passed_in_options);$element.on("dp.change",function(e){if(ngModelCtrl){$timeout(function(){ngModelCtrl.$setViewValue(e.target.value)})}}).datetimepicker(options);function setPickerValue(){var date=options.defaultDate||null;if(ngModelCtrl&&ngModelCtrl.$viewValue){date=ngModelCtrl.$viewValue}$element.data("DateTimePicker").date(date)}if(ngModelCtrl){ngModelCtrl.$render=function(){setPickerValue()}}setPickerValue()}}}]);
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name" : "angular-bootstrap-datetimepicker-directive",
3 | "version" : "0.1.3",
4 | "authors" : [
5 | "Diosney "
6 | ],
7 | "description" : "A wrapper directive around the bootstrap-datetimepicker component.",
8 | "main" : "angular-bootstrap-datetimepicker-directive.js",
9 | "keywords" : [
10 | "angular",
11 | "bootstrap",
12 | "datetimepicker",
13 | "directive",
14 | "wrapper"
15 | ],
16 | "license" : "MIT",
17 | "homepage" : "http://github.com/diosney/angular-bootstrap-datetimepicker-directive",
18 | "ignore" : [
19 | "**/.*",
20 | "node_modules",
21 | "bower_components",
22 | "test",
23 | "tests"
24 | ],
25 | "dependencies" : {
26 | "angular" : "*",
27 | "eonasdan-bootstrap-datetimepicker" : ">=4.0.0",
28 | "jquery" : "*"
29 | },
30 | "repository" : {
31 | "type" : "git",
32 | "url" : "git://github.com/diosney/angular-bootstrap-datetimepicker-directive.git"
33 | }
34 | }
--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | datetimepicker Directive Examples
6 |
7 |
8 |
9 |
10 |
11 |
12 |