From 4a74ad46f7e3bd6dee29187019b2739c8562c086 Mon Sep 17 00:00:00 2001 From: Francois Zaninotto Date: Thu, 5 Mar 2015 14:51:08 +0100 Subject: [PATCH 1/3] Introducing datetime field Uses a simple datepicker widget (similar to date field), but allows to enter time. Supersedes #297 Also, fixes the date field to skip timezones entirely (refs #345, #347) --- README.md | 27 ++++++++++++------- examples/blog/config.js | 11 +------- .../ng-admin/Crud/config/factories.js | 1 + .../service/config/fieldTypes/DateField.js | 13 ++++++--- .../config/fieldTypes/DateTimeField.js | 20 ++++++++++++++ .../ng-admin/Main/config/factories.js | 1 + 6 files changed, 50 insertions(+), 23 deletions(-) create mode 100644 src/javascripts/ng-admin/Main/component/service/config/fieldTypes/DateTimeField.js diff --git a/README.md b/README.md index 8ae938df..3916412f 100644 --- a/README.md +++ b/README.md @@ -319,7 +319,7 @@ A field is the representation of a property of an entity. ### General Field Settings * `nga.field(name, type)` -Create a new field of the given type. Default type is 'string', so you can omit it. Bundled types include `number`, `string`, `text`, `boolean`, `wysiwyg`, `email`, `date`, `choice`, `choices`, `json`, `file`, and `template` +Create a new field of the given type. Default type is 'string', so you can omit it. Bundled types include `number`, `string`, `text`, `boolean`, `wysiwyg`, `email`, `date`, `datetime`, `choice`, `choices`, `json`, `file`, and `template` * `label(string label)` Define the label of the field. Defaults to the uppercased field name. @@ -330,21 +330,12 @@ Define if the field is editable in the edition form. Usefult to display a field * `order(number|null)` Define the position of the field in the view. -* `format(string ['yyyy-MM-dd' by default])` -Define the format for `date` type. - -* `parse(function [no change by default])` -Filter applied to modify date object returned by date picker if needed. - * `isDetailLink(boolean)` Tell if the value is a link in the list view. Default to true for the identifier and references field, false otherwise. The link points to the edition view, except for read-only entities, where it points to the show view. * `detailLinkRoute(string)` Define the route for a link in the list view, i.e. `isDetailLink` of the field is true. The default is `edit`, hence the link points to the edition view. The other option is `show` to point to the show view. -* `choices([{value: '', label: ''}, ...])` -Define array of choices for `choice` type. A choice has both a value and a label. - * `map(function)` Define a custom function to transform the value. It receive the value and the corresponding entry. Works in list, edit views and references. @@ -381,10 +372,26 @@ A list of CSS classes to be added to the corresponding field. If you provide a f * `defaultValue(*)` Define the default value of the field in the creation form. +### `choice` and `choices` Field Settings + +* `choices([{value: '', label: ''}, ...])` +Define array of choices for `choice` type. A choice has both a value and a label. + +### `date` and `datetime` Field Settings + +* `format(string ['yyyy-MM-dd' by default])` +Define the format for `date` and `datetime` types. + +* `parse(function [no change by default])` +Filter applied to modify date object returned by date picker if needed. + +### `template` Field Settings * `template(*)` Define the template to be displayed for fields of type `template` (can be a string or a function). +### `file` Field Settings + * `uploadInformation` Give upload information for `file` field type - `url`: url for server side upload diff --git a/examples/blog/config.js b/examples/blog/config.js index 51f0fa69..1b34ce5f 100644 --- a/examples/blog/config.js +++ b/examples/blog/config.js @@ -161,16 +161,7 @@ nga.field('q', 'string').label('').attributes({'placeholder': 'Global Search'}), nga.field('created_at', 'date') .label('Posted') - .attributes({'placeholder': 'Filter by date'}) - .format('yyyy-MM-dd') - .parse(function(date) { - // the backend is dumb and doesn't interpret date objects - // so we convert the date to a string without timezone - var dateObject = date instanceof Date ? date : new Date(date); - dateObject.setMinutes(dateObject.getMinutes() - dateObject.getTimezoneOffset()); - var dateString = dateObject.toJSON(); - return dateString ? dateString.substr(0,10) : null; - }), + .attributes({'placeholder': 'Filter by date'}), nga.field('today', 'boolean').map(function() { var now = new Date(), year = now.getFullYear(), diff --git a/src/javascripts/ng-admin/Crud/config/factories.js b/src/javascripts/ng-admin/Crud/config/factories.js index e9ce9cfb..4a70a665 100644 --- a/src/javascripts/ng-admin/Crud/config/factories.js +++ b/src/javascripts/ng-admin/Crud/config/factories.js @@ -8,6 +8,7 @@ define(function (require) { fvp.registerFieldView('choice', require('ng-admin/Crud/fieldView/ChoiceFieldView')); fvp.registerFieldView('choices', require('ng-admin/Crud/fieldView/ChoicesFieldView')); fvp.registerFieldView('date', require('ng-admin/Crud/fieldView/DateFieldView')); + fvp.registerFieldView('datetime', require('ng-admin/Crud/fieldView/DateTimeFieldView')); fvp.registerFieldView('email', require('ng-admin/Crud/fieldView/EmailFieldView')); fvp.registerFieldView('file', require('ng-admin/Crud/fieldView/FileFieldView')); fvp.registerFieldView('json', require('ng-admin/Crud/fieldView/JsonFieldView')); diff --git a/src/javascripts/ng-admin/Main/component/service/config/fieldTypes/DateField.js b/src/javascripts/ng-admin/Main/component/service/config/fieldTypes/DateField.js index 66481a35..4712d3c4 100644 --- a/src/javascripts/ng-admin/Main/component/service/config/fieldTypes/DateField.js +++ b/src/javascripts/ng-admin/Main/component/service/config/fieldTypes/DateField.js @@ -6,11 +6,18 @@ define(function (require) { var Field = require('ng-admin/Main/component/service/config/Field'), utils = require('ng-admin/lib/utils'); - function DateField(fieldName) { + function DateField() { Field.apply(this, arguments); this._format = 'yyyy-MM-dd'; - this._parse = function (date) { - return date; + this._parse = function(date) { + if (date instanceof Date) { + // the datepicker returns a JS Date object, with hours, minutes and timezone + // in order to convert it back to date, we must remove the timezone, then + // remove hours and minutes + date.setMinutes(date.getMinutes() - date.getTimezoneOffset()); + var dateString = date.toJSON(); + return dateString ? dateString.substr(0,10) : null; + } }; } diff --git a/src/javascripts/ng-admin/Main/component/service/config/fieldTypes/DateTimeField.js b/src/javascripts/ng-admin/Main/component/service/config/fieldTypes/DateTimeField.js new file mode 100644 index 00000000..f805e0c6 --- /dev/null +++ b/src/javascripts/ng-admin/Main/component/service/config/fieldTypes/DateTimeField.js @@ -0,0 +1,20 @@ +/*global define*/ + +define(function (require) { + 'use strict'; + + var DateField = require('ng-admin/Main/component/service/config/fieldTypes/DateField'), + utils = require('ng-admin/lib/utils'); + + function DateTimeField() { + DateField.apply(this, arguments); + this._format = 'yyyy-MM-dd HH:mm:ss'; + this._parse = function(date) { + return date; + }; + } + + utils.inherits(DateTimeField, DateField); + + return DateTimeField; +}); diff --git a/src/javascripts/ng-admin/Main/config/factories.js b/src/javascripts/ng-admin/Main/config/factories.js index 7fd36ec6..77694260 100644 --- a/src/javascripts/ng-admin/Main/config/factories.js +++ b/src/javascripts/ng-admin/Main/config/factories.js @@ -12,6 +12,7 @@ define(function (require) { nga.registerFieldType('choice', ChoiceField); nga.registerFieldType('choices', ChoiceField); nga.registerFieldType('date', require('ng-admin/Main/component/service/config/fieldTypes/DateField')); + nga.registerFieldType('datetime', require('ng-admin/Main/component/service/config/fieldTypes/DateTimeField')); nga.registerFieldType('email', Field); nga.registerFieldType('file', require('ng-admin/Main/component/service/config/fieldTypes/FileField')); nga.registerFieldType('json', Field); From 53ebd28db00e4c909ac812a54e70faba3fd7bb5f Mon Sep 17 00:00:00 2001 From: Francois Zaninotto Date: Thu, 5 Mar 2015 14:56:08 +0100 Subject: [PATCH 2/3] Fix wrong factory name --- src/javascripts/ng-admin/Crud/config/factories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/javascripts/ng-admin/Crud/config/factories.js b/src/javascripts/ng-admin/Crud/config/factories.js index 4a70a665..d62c6763 100644 --- a/src/javascripts/ng-admin/Crud/config/factories.js +++ b/src/javascripts/ng-admin/Crud/config/factories.js @@ -8,7 +8,7 @@ define(function (require) { fvp.registerFieldView('choice', require('ng-admin/Crud/fieldView/ChoiceFieldView')); fvp.registerFieldView('choices', require('ng-admin/Crud/fieldView/ChoicesFieldView')); fvp.registerFieldView('date', require('ng-admin/Crud/fieldView/DateFieldView')); - fvp.registerFieldView('datetime', require('ng-admin/Crud/fieldView/DateTimeFieldView')); + fvp.registerFieldView('datetime', require('ng-admin/Crud/fieldView/DateFieldView')); fvp.registerFieldView('email', require('ng-admin/Crud/fieldView/EmailFieldView')); fvp.registerFieldView('file', require('ng-admin/Crud/fieldView/FileFieldView')); fvp.registerFieldView('json', require('ng-admin/Crud/fieldView/JsonFieldView')); From 03712dbf1e5d0a1bf732faf5b6681d4cda082950 Mon Sep 17 00:00:00 2001 From: Francois Zaninotto Date: Fri, 6 Mar 2015 12:43:53 +0100 Subject: [PATCH 3/3] Fix README --- README.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3916412f..636226c3 100644 --- a/README.md +++ b/README.md @@ -372,15 +372,22 @@ A list of CSS classes to be added to the corresponding field. If you provide a f * `defaultValue(*)` Define the default value of the field in the creation form. + ### `choice` and `choices` Field Settings * `choices([{value: '', label: ''}, ...])` Define array of choices for `choice` type. A choice has both a value and a label. -### `date` and `datetime` Field Settings +### `date` Field Settings * `format(string ['yyyy-MM-dd' by default])` -Define the format for `date` and `datetime` types. + +* `parse(function [remove hours, minutes and timezone by default])` +Filter applied to modify date object returned by date picker if needed. + +### `datetime` Field Settings + +* `format(string ['yyyy-MM-dd HH:mm:ss' by default])` * `parse(function [no change by default])` Filter applied to modify date object returned by date picker if needed.