Added event emit to setDate method

README.md

@@ -1,11 +1,14 @@
-Simple DateTime Picker For AngularJS
+Extended version of Kinetic Social's 'Simple DateTime Picker For AngularJS'
 ===================================
 
 No JQuery, No Bootstrap, Just AngularJS (ver. 1.3+)
 
+[Original](https://github.com/kineticsocial/angularjs-datetime-picker)
 [DEMO](https://rawgit.com/kineticsocial/angularjs-datetime-picker/master/index.html)
 [![Imgur](http://i.imgur.com/UJfYMN6.png?1)](https://rawgit.com/kineticsocial/angularjs-datetime-picker/master/index.html)
 
+NOTE: This fork introduces an event emit when setDate has completed that emit's the id and date value to parent scopes.
+
 To Get Started
 --------------
 
@@ -37,6 +40,7 @@ Attributes
   -  minute: optional, minute selected, 59
   -  date-only: optional, if set, timepicker will be hidden
   -  future-only: optional, if set, forces validation errors on dates earlier than now
+  -  field-id: optional, if set, when setDate() is called, emits a 'datetime-picker-changed' event with the id and the new date value
 
 Examples
 --------

angularjs-datetime-picker.css

@@ -72,3 +72,15 @@
 .angularjs-datetime-picker input[type=range] {
   width: 150px;
 }
+
+.adp-month-select
+{
+  margin-left: 15px;
+}
+
+.adp-year-input {
+  width: 50px;
+  margin-left: 5px;
+  padding-left: 5px;
+  font-weight: bold;
+}

angularjs-datetime-picker.js

@@ -54,6 +54,9 @@
       if (options.closeOnSelect === 'false') {
         div.attr('close-on-select', 'false');
       }
+      if (options.fieldId){
+        div.attr('field-id', options.fieldId);
+      }
 
       var triggerEl = options.triggerEl;
       options.scope = options.scope || angular.element(triggerEl).scope();
@@ -65,7 +68,6 @@
       //show datetimePicker below triggerEl
       var bcr = triggerEl.getBoundingClientRect();
 
-
       options.scope.$apply();
 
       var datePickerElBcr = datetimePickerEl.getBoundingClientRect();
@@ -109,7 +111,8 @@
     '<div class="angularjs-datetime-picker">' ,
     '  <div class="adp-month">',
     '    <button type="button" class="adp-prev" ng-click="addMonth(-1)">&laquo;</button>',
-    '    <span title="{{months[mv.month].fullName}}">{{months[mv.month].shortName}}</span> {{mv.year}}',
+    '    <span class="adp-month-select" title="{{months[mv.month].fullName}}">{{months[mv.month].shortName}}</span>',
+    '    <input class="adp-year-input" type="number" max-length="4" min="1900" max="2999" ng-model="mv.year" onkeydown="return false" ng-change="updateView()"/>',
     '    <button type="button" class="adp-next" ng-click="addMonth(1)">&raquo;</button>',
     '  </div>',
     '  <div class="adp-days" ng-click="setDate($event)">',
@@ -252,6 +255,10 @@
         scope.mv = getMonthView(scope.mv.year, scope.mv.month + amount);
       };
 
+      scope.updateView = function() {
+        scope.mv = getMonthView(scope.mv.year, scope.mv.month);
+      }
+
       scope.setDate = function (evt) {
         var target = angular.element(evt.target)[0];
         if (target.className.indexOf('selectable') !== -1) {
@@ -269,14 +276,24 @@
         );
         scope.selectedDay = scope.selectedDate.getDate();
         if (attrs.ngModel) {
-          //console.log('attrs.ngModel',attrs.ngModel);
           var elScope = ctrl.triggerEl.scope(), dateValue;
+
           if (elScope.$eval(attrs.ngModel) && elScope.$eval(attrs.ngModel).constructor.name === 'Date') {
             dateValue = new Date(dateFilter(scope.selectedDate, dateFormat));
           } else {
             dateValue = dateFilter(scope.selectedDate, dateFormat);
           }
           elScope.$eval(attrs.ngModel + '= date', {date: dateValue});
+
+          // Emit event as ng-change does not trigger programmatically
+          if (scope.fieldId && scope.fieldId.length > 0)
+          {
+            scope.$emit('datetime-picker-changed',
+            {
+                id: scope.fieldId,
+                date: dateValue
+            });
+          }
         }
       };
 
@@ -295,7 +312,8 @@
         hour: '=',
         minute: '=',
         dateOnly: '=',
-        closeOnSelect: '='
+        closeOnSelect: '=',
+        fieldId: '@?'
       },
       link: linkFunc
     };
@@ -334,7 +352,8 @@
             minute: attrs.minute,
             dateOnly: attrs.dateOnly,
             futureOnly: attrs.futureOnly,
-            closeOnSelect: attrs.closeOnSelect
+            closeOnSelect: attrs.closeOnSelect,
+            fieldId: attrs.fieldId
           });
         });
       }
@@ -343,4 +362,4 @@
   datetimePicker.$inject=['$parse', 'DatetimePicker'];
   angular.module('angularjs-datetime-picker').directive('datetimePicker', datetimePicker);
 
-})();
+})();

bower.json

@@ -1,7 +1,7 @@
 {
-  "name": "angularjs-datetime-picker",
-  "main": "angularjs-datetime-picker.js",
-  "version": "0.1.20",
+  "name": "extended-angularjs-datetime-picker",
+  "main": "extended-angularjs-datetime-picker.js",
+  "version": "0.1.21",
   "homepage": "https://github.com/kineticsocial/angularjs-datetime-picker",
   "authors": [
     "Allen Kim <[email protected]>"