Merge pull request #528 from marmelab/date_filter

[RFR] Fix default date format in date field
marmelab · Jun 24, 2015 · 2a74e74 · 2a74e74
2 parents 145019a + 59e7d25
commit 2a74e74
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "admin-config": "^0.2.1",
     "angular": "~1.3.15",
     "angular-bootstrap": "^0.12.0",
-    "angular-mocks": "^1.3.15",
+    "angular-mocks": "1.3.14",
     "angular-numeraljs": "^1.1.6",
     "angular-sanitize": "^1.3.15",
     "angular-ui-codemirror": "^0.3.0",

diff --git a/src/javascripts/ng-admin/Crud/CrudModule.js b/src/javascripts/ng-admin/Crud/CrudModule.js
@@ -19,6 +19,7 @@ CrudModule.service('RestWrapper', require('./misc/RestWrapper'));
 
 CrudModule.directive('maJsonValidator', require('./validator/maJsonValidator'));
 
+CrudModule.directive('datepickerPopup', require('./field/datepickerPopup'));
 CrudModule.directive('maField', require('./field/maField'));
 CrudModule.directive('maButtonField', require('./field/maButtonField'));
 CrudModule.directive('maChoiceField', require('./field/maChoiceField'));

diff --git a/src/javascripts/ng-admin/Crud/field/datepickerPopup.js b/src/javascripts/ng-admin/Crud/field/datepickerPopup.js
@@ -0,0 +1,16 @@
+/* Fixes an issue with Bootstrap Date Picker
+   @see https://github.com/angular-ui/bootstrap/issues/2659 */
+var datepickerPopup = function () {
+    return {
+        restrict: 'EAC',
+        require: 'ngModel',
+        link: function(scope, element, attr, controller) {
+            //remove the default formatter from the input directive to prevent conflict
+            controller.$formatters.shift();
+        }
+    }
+};
+
+datepickerPopup.$inject = [];
+
+export default datepickerPopup;
diff --git a/src/javascripts/ng-admin/Crud/field/maDateField.js b/src/javascripts/ng-admin/Crud/field/maDateField.js
@@ -1,58 +1,55 @@
-/*global define*/
+/**
+ * Edition field for a date - a text input with a datepicker.
+ *
+ * @example <ma-date-field field="field" value="value"></ma-date-field>
+ */
+function maDateField() {
+    return {
+        scope: {
+            'field': '&',
+            'value': '='
+        },
+        restrict: 'E',
+        link: function(scope, element) {
+            var field = scope.field();
+            scope.name = field.name();
+            scope.rawValue = scope.value;
+            scope.$watch('rawValue', function(rawValue) {
+                scope.value = field.parse()(rawValue);
+            });
+            scope.format = field.format();
+            if (!scope.format) {
+                scope.format = field.type() === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss';
+            }
 
-define(function (require) {
-    'use strict';
+            scope.v = field.validation();
+            scope.isOpen = false;
+            var input = element.find('input').eq(0);
+            var attributes = field.attributes();
+            for (var name in attributes) {
+                input.attr(name, attributes[name]);
+            }
+            scope.toggleDatePicker = function ($event) {
+                $event.preventDefault();
+                $event.stopPropagation();
+                scope.isOpen = !scope.isOpen;
+            };
+        },
+        template: `
+            <div class="input-group datepicker">
+                <input
+                    type="text" ng-model="rawValue" id="{{ name }}" name="{{ name }}" class="form-control"
+                    datepicker-popup="{{ format }}" is-open="isOpen" close-text="Close" ng-required="v.required" />
+                <span class="input-group-btn">
+                    <button type="button" class="btn btn-default" ng-click="toggleDatePicker($event)">
+                        <i class="glyphicon glyphicon-calendar"></i>
+                    </button>
+                </span>
+            </div>
+        `
+    };
+}
 
-    /**
-     * Edition field for a date - a text input with a datepicker.
-     *
-     * @example <ma-date-field field="field" value="value"></ma-date-field>
-     */
-    function maDateField() {
-        return {
-            scope: {
-                'field': '&',
-                'value': '='
-            },
-            restrict: 'E',
-            link: function(scope, element) {
-                var field = scope.field();
-                scope.name = field.name();
-                scope.rawValue = scope.value;
-                scope.$watch('rawValue', function(rawValue) {
-                    scope.value = field.parse()(rawValue);
-                });
-                scope.format = field.format();
-                if (!scope.format) {
-                    scope.format = field.type() === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss';
-                }
+maDateField.$inject = [];
 
-                scope.v = field.validation();
-                scope.isOpen = false;
-                var input = element.find('input').eq(0);
-                var attributes = field.attributes();
-                for (var name in attributes) {
-                    input.attr(name, attributes[name]);
-                }
-                scope.toggleDatePicker = function ($event) {
-                    $event.preventDefault();
-                    $event.stopPropagation();
-                    scope.isOpen = !scope.isOpen;
-                };
-            },
-            template:
-'<div class="input-group datepicker">' +
-    '<input type="text" ng-model="rawValue" id="{{ name }}" name="{{ name }}" class="form-control" ' +
-           'datepicker-popup="{{ format }}" is-open="isOpen" close-text="Close" ' +
-           'ng-required="v.required" />' +
-    '<span class="input-group-btn">' +
-        '<button type="button" class="btn btn-default" ng-click="toggleDatePicker($event)"><i class="glyphicon glyphicon-calendar"></i></button>' +
-    '</span>' +
-'</div>'
-        };
-    }
-
-    maDateField.$inject = [];
-
-    return maDateField;
-});
+export default maDateField;
diff --git a/src/javascripts/test/karma.conf.js b/src/javascripts/test/karma.conf.js
@@ -12,7 +12,9 @@ module.exports = function (config) {
         browsers: [process.env.CI ? 'PhantomJS' : 'Chrome'],
         frameworks: ['jasmine'],
         files: [
-            '../../node_modules/angular/angular.min.js',
+            '../../node_modules/angular/angular.js',
+            '../../node_modules/angular-bootstrap/dist/ui-bootstrap.min.js',
+            '../../node_modules/angular-bootstrap/dist/ui-bootstrap-tpls.min.js',
             '../../node_modules/angular-mocks/angular-mocks.js',
             '../../node_modules/angular-numeraljs/dist/angular-numeraljs.min.js',
             '../../node_modules/numeral/numeral.js',

diff --git a/src/javascripts/test/unit/Crud/field/maDateFieldSpec.js b/src/javascripts/test/unit/Crud/field/maDateFieldSpec.js
@@ -2,9 +2,13 @@
 describe('directive: date-field', function() {
     'use strict';
 
-    var directive = require('../../../../ng-admin/Crud/field/maDateField');
+    var dateDirective = require('../../../../ng-admin/Crud/field/maDateField');
+    var datepickerPopupDirective = require('../../../../ng-admin/Crud/field/datepickerPopup');
     var DateField = require('admin-config/lib/Field/DateField');
-    angular.module('testapp_DateField', []).directive('maDateField', directive);
+
+    angular.module('testapp_DateField', ['ui.bootstrap', 'ui.bootstrap.tpls'])
+        .directive('maDateField', dateDirective)
+        .directive('datepickerPopup', datepickerPopupDirective);
 
     var $compile,
         scope,
@@ -24,6 +28,16 @@ describe('directive: date-field', function() {
         expect(element.find('input').eq(0).attr('type')).toBe('text');
     });
 
+    it('should format default value correctly', function () {
+        scope.value = new Date(2014, 2, 1);
+        scope.field = (new DateField()).format('yyyy-MM-dd');
+
+        var element = $compile(directiveUsage)(scope);
+        scope.$digest();
+
+        expect(element.find('input').eq(0).val()).toBe('2014-03-01');
+    });
+
     it("should use the supplied format as datepicker parameter", function () {
         scope.field = new DateField().format('yyyy-MM');
         var date = new Date('2015-01-23');