Issues #54, #80, #89, #90

Complete customisation of the button bar is now enabled. Added new whenClosed callback function that is called with arguments about the date and how is is closed
Gillardo · Jan 28, 2016 · 5116277 · 5116277
1 parent 63d3972
commit 5116277
Show file tree

Hide file tree

Showing 11 changed files with 285 additions and 139 deletions.
diff --git a/README.md b/README.md
@@ -28,12 +28,7 @@ You have the following properties available to use with the directive.  All are
 * closeOnDateSelection (true/false)
 * enableDate (true/false)
 * enableTime (true/false)
-* todayText  (string)
-* nowText (string)
-* dateText (string)
-* timeText (string)
-* clearText (string)
-* closeText (string)
+* buttonBar (object)
 * dateDisabled
 * datepickerOptions (object)
 * timepickerOptions (object)
@@ -47,18 +42,9 @@ Close popup once a date has been chosen. TimePicker will stay open until user cl
 Whether you would like the user to be able to select a date. Defaults to true
 ##### enableTime
 Whether you would like the user to be able to select a time. Defaults to true
-##### todayText
-The text for the button that allows the user to select today when the date picker is visible
-##### nowText
-The text for the button that allows the user to select the current time when the time picker is visible.  If the date is already populated this will only change the time of the existing date.
-##### dateText
-The text for the button that allows the user to change to the date picker while the time picker is visible.
-##### timeText
-The text for the button that allows the user to change to the time picker while the date picker is visible.
-##### clearText
-The text for the button that allows the user to clear the currently selected date / time
-##### closeText
-The text for the button that closes the date / time popup/dropdown
+##### buttonBar
+To show or hide the button bar, or any of the buttons inside it. Defaults to the uiDatetimePickerConfig.
+Only specify the elements that you want to override, as each button defaults to the uiDatetimePickerConfig setup, if it is not configured on scope of the datetimePicker
 ##### dateDisabled
 From angularUI site -> An optional expression to disable visible options based on passing date and current mode (day|month|year).
 ##### datepickerOptions
@@ -67,27 +53,57 @@ Object to configure settings for the datepicker (can be found on angularUI site)
 Object to configure settings for the timepicker (can be found on angularUI site)
 ##### defaultTime
 Initial time when a new date is selected (e.g. "14:00:00" or "2:00 pm")
+##### customClass
+From angularUI site -> An optional expression to add classes based on passing a date and current mode
+##### whenClosed
+An callback function to call when the picker dropdown is closed. See demo for more details.
 
 ## uiDatetimePickerConfig
 Now datetimePicker options are globally set by default.  If you do not state the values within the declaration, the config options are used instead.  Here are the default options
 
 ```
 .constant('uiDatetimePickerConfig', {
-    dateFormat: 'yyyy-MM-dd HH:mm',
-    enableDate: true,
-    enableTime: true,
-    todayText: 'Today',
-    nowText: 'Now',
-    clearText: 'Clear',
-    closeText: 'Done',
-    dateText: 'Date',
-    timeText: 'Time',
-    closeOnDateSelection: true,
-    appendToBody: false,
-    showButtonBar: true,
-    defaultTime: '00:00:00',
-    ngModelOptions: {}
-})
+        dateFormat: 'yyyy-MM-dd HH:mm',
+        defaultTime: '00:00:00',
+        html5Types: {
+            date: 'yyyy-MM-dd',
+            'datetime-local': 'yyyy-MM-ddTHH:mm:ss.sss',
+            'month': 'yyyy-MM'
+        },
+        enableDate: true,
+        enableTime: true,
+        buttonBar: {
+            show: true,
+            now: {
+                show: true,
+                text: 'Now'
+            },
+            today: {
+                show: true,
+                text: 'Today'
+            },
+            clear: {
+                show: true,
+                text: 'Clear'
+            },
+            date: {
+                show: true,
+                text: 'Date'
+            },
+            time: {
+                show: true,
+                text: 'Time'
+            },
+            close: {
+                show: true,
+                text: 'Close'
+            }
+        },
+        closeOnDateSelection: true,
+        appendToBody: false,
+        altInputFormats: [],
+        ngModelOptions: { }
+    })
 ```
 
 ## Css

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-ui-datetime-picker",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "homepage": "https://github.com/Gillardo/bootstrap-ui-datetime-picker",
   "authors": [
     "Gillardo <[email protected]>"

diff --git a/datetime-picker.js b/datetime-picker.js
@@ -9,15 +9,35 @@
         },
         enableDate: true,
         enableTime: true,
-        todayText: 'Today',
-        nowText: 'Now',
-        clearText: 'Clear',
-        closeText: 'Done',
-        dateText: 'Date',
-        timeText: 'Time',
+        buttonBar: {
+            show: true,
+            now: {
+                show: true,
+                text: 'Now'
+            },
+            today: {
+                show: true,
+                text: 'Today'
+            },
+            clear: {
+                show: true,
+                text: 'Clear'
+            },
+            date: {
+                show: true,
+                text: 'Date'
+            },
+            time: {
+                show: true,
+                text: 'Time'
+            },
+            close: {
+                show: true,
+                text: 'Close'
+            }
+        },
         closeOnDateSelection: true,
         appendToBody: false,
-        showButtonBar: true,
         altInputFormats: [],
         ngModelOptions: { }
     })
@@ -34,7 +54,7 @@
                 ngModelOptions = ngModel.$options || uiDatetimePickerConfig.ngModelOptions;
 
                 scope.watchData = {};
-                scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : uiDatetimePickerConfig.showButtonBar;
+                scope.buttonBar = angular.isDefined(attrs.buttonBar) ? scope.$parent.$eval(attrs.buttonBar) : uiDatetimePickerConfig.buttonBar;
 
                 // determine which pickers should be available. Defaults to date and time
                 scope.enableDate = angular.isDefined(scope.enableDate) ? scope.enableDate : uiDatetimePickerConfig.enableDate;
@@ -225,7 +245,15 @@
 
             // get text
             scope.getText = function (key) {
-                return scope[key + 'Text'] || uiDatetimePickerConfig[key + 'Text'];
+                return scope.buttonBar[key].text || uiDatetimePickerConfig.buttonBar[key].text;
+            };
+
+            // determine if button is to be shown or not
+            scope.doShow = function(key) {
+                if (angular.isDefined(scope.buttonBar[key].show))
+                    return scope.buttonBar[key].show;
+                else
+                    return uiDatetimePickerConfig.buttonBar[key].show;
             };
 
             // Inner change
@@ -285,7 +313,7 @@
                                 scope.showPicker = 'time';
                             }, 0);
                         } else {
-                            scope.close();
+                            scope.close(false);
                         }
                     }
                 }
@@ -294,7 +322,7 @@
 
             scope.keydown = function(evt) {
                 if (evt.which === 27) {
-                    scope.close();
+                    scope.close(false);
                     element[0].focus();
                 }
             };
@@ -305,6 +333,8 @@
                 };
 
                 if (value) {
+                    cache['openDate'] = scope.date;
+
                     var position = appendToBody ? $uibPosition.offset(element) : $uibPosition.position(element);
 
                     if (appendToBody) {
@@ -359,13 +389,18 @@
                     scope.close();
             };
 
-            scope.close = function () {
+            scope.close = function (closePressed) {
                 scope.isOpen = false;
 
                 // if enableDate and enableTime are true, reopen the picker in date mode first
                 if (scope.enableDate && scope.enableTime)
                     scope.showPicker = 'date';
 
+                // if a on-close-fn has been defined, lets call it
+                // we only call this if closePressed is defined!
+                if (angular.isDefined(closePressed))
+                    scope.whenClosed({ args: {closePressed: closePressed, openDate: cache['openDate'] || null, closeDate: scope.date } });
+
                 element[0].focus();
             };
 
@@ -401,7 +436,7 @@
 
                 if (scope.isOpen && !(dpContainsTarget || popupContainsTarget)) {
                     scope.$apply(function() {
-                        scope.isOpen = false;
+                        scope.close(false);
                     });
                 }
             }
@@ -411,7 +446,7 @@
                     evt.preventDefault();
                     evt.stopPropagation();
                     scope.$apply(function() {
-                        scope.close();
+                        scope.close(false);
                     });
                     element[0].focus();
                 } else if (evt.which === 40 && !scope.isOpen) {
@@ -496,14 +531,9 @@
                 isOpen: '=?',
                 enableDate: '=?',
                 enableTime: '=?',
-                todayText: '@',
-                nowText: '@',
-                dateText: '@',
-                timeText: '@',
-                clearText: '@',
-                closeText: '@',
                 dateDisabled: '&',
-                customClass: '&'
+                customClass: '&',
+                whenClosed: '&'
             },
             link: function (scope, element, attrs, ctrls) {
                 var ngModel = ctrls[0],