From 59e7d250e8544b97f1f123c1095e6480e8a13b33 Mon Sep 17 00:00:00 2001 From: Jonathan Petitcolas Date: Wed, 24 Jun 2015 15:14:00 +0200 Subject: [PATCH] Fix default date format in date field --- package.json | 2 +- src/javascripts/ng-admin/Crud/CrudModule.js | 1 + .../ng-admin/Crud/field/datepickerPopup.js | 16 +++ .../ng-admin/Crud/field/maDateField.js | 107 +++++++++--------- src/javascripts/test/karma.conf.js | 4 +- .../test/unit/Crud/field/maDateFieldSpec.js | 18 ++- 6 files changed, 89 insertions(+), 59 deletions(-) create mode 100644 src/javascripts/ng-admin/Crud/field/datepickerPopup.js diff --git a/package.json b/package.json index 7c1eb9a7..23e7d7e2 100644 --- 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 index 02816907..301dfe37 100644 --- 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 new file mode 100644 index 00000000..7aabdaae --- /dev/null +++ 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 index fb373a10..a4345ef9 100644 --- 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 + */ +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: ` +
+ + + + +
+ ` + }; +} - /** - * Edition field for a date - a text input with a datepicker. - * - * @example - */ - 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: -'
' + - '' + - '' + - '' + - '' + -'
' - }; - } - - maDateField.$inject = []; - - return maDateField; -}); +export default maDateField; diff --git a/src/javascripts/test/karma.conf.js b/src/javascripts/test/karma.conf.js index 58635172..790ead49 100644 --- 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 index b980b067..192cd285 100644 --- 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');