Datetime data type

CHANGELOG.md

@@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Added
+[#364](https://github.com/plotly/dash-table/pull/364)
+- Added the `datetime` data type
+
 ### Changed
 [#224](https://github.com/plotly/dash-table/issues/224)
 - Added support for unquoted column id with

dash_table/metadata.json

@@ -151,9 +151,13 @@
                   "default": {
                     "name": "any",
                     "required": false
+                  },
+                  "allow_YY": {
+                    "name": "bool",
+                    "required": false
                   }
                 },
-                "description": "The `validation` options.\n'allow_null': Allow the use of nully values (undefined, null, NaN) (default: false)\n'default': The default value to apply with on_change.failure = 'default' (default: null)",
+                "description": "The `validation` options.\n'allow_null': Allow the use of nully values (undefined, null, NaN) (default: false)\n'default': The default value to apply with on_change.failure = 'default' (default: null)\n'allow_YY': `datetime` columns only, allow 2-digit years (default: false).\n  If true, we interpret years as ranging from now-70 to now+29 - in 2019\n  this is 1949 to 2048 but in 2020 it will be different. If used with\n  `action: 'coerce'`, will convert user input to a 4-digit year.",
                 "required": false
               },
               "options": {
@@ -204,9 +208,13 @@
                   {
                     "value": "'text'",
                     "computed": false
+                  },
+                  {
+                    "value": "'datetime'",
+                    "computed": false
                   }
                 ],
-                "description": "The data-type of the column's data.\n'numeric': represents both floats and ints\n'text': represents a string\n'any': represents any type of data\n\nDefaults to 'any' if undefined.\n\nNOTE: This feature has not been fully implemented.\nIn the future, it's data types will impact things like\ntext formatting options in the cell (e.g. display 2 decimals\nfor a number), filtering options and behavior, and editing\nbehavior.\nStay tuned by following [https://github.com/plotly/dash-table/issues/166](https://github.com/plotly/dash-table/issues/166)",
+                "description": "The data-type of the column's data.\n'numeric': represents both floats and ints\n'text': represents a string\n'datetime': a string representing a date or date-time, in the form:\n  'YYYY-MM-DD HH:MM:SS.ssssss' or some truncation thereof. Years must\n  have 4 digits, unless you use `validation.allow_YY: true`. Also\n  accepts 'T' or 't' between date and time, and allows timezone info\n  at the end. To convert these strings to Python `datetime` objects,\n  use `dateutil.parser.isoparse`. In R use `parse_iso_8601` from the\n  `parsedate` library.\n  WARNING: these parsers do not work with 2-digit years, if you use\n  `validation.allow_YY: true` and do not coerce to 4-digit years.\n  And parsers that do work with 2-digit years may make a different\n  guess about the century than we make on the front end.\n'any': represents any type of data\n\nDefaults to 'any' if undefined.\n\nNOTE: This feature has not been fully implemented.\nIn the future, it's data types will impact things like\ntext formatting options in the cell (e.g. display 2 decimals\nfor a number), filtering options and behavior, and editing\nbehavior.\nStay tuned by following [https://github.com/plotly/dash-table/issues/166](https://github.com/plotly/dash-table/issues/166)",
                 "required": false
               }
             }

dash_table/package-info.json

@@ -56,7 +56,7 @@
     "@types/react-dom": "^16.8.0",
     "@types/react-select": "^1.3.4",
     "babel-loader": "^8.0.5",
-    "core-js": "^2.6.3",
+    "core-js": "^2.6.4",
     "css-loader": "^2.1.0",
     "cypress": "^3.1.5",
     "fast-isnumeric": "^1.1.2",
@@ -76,9 +76,9 @@
     "style-loader": "^0.23.1",
     "ts-loader": "^5.3.3",
     "tslint": "^5.12.1",
-    "typescript": "^3.3.1",
+    "typescript": "^3.3.3",
     "wait-on": "^3.2.0",
-    "webpack": "^4.29.2",
+    "webpack": "^4.29.3",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.1.14",
     "webpack-preprocessor": "^0.1.12"

demo/AppMode.ts

@@ -8,11 +8,13 @@ import {
     PropsWithDefaults,
     ChangeAction,
     ChangeFailure,
-    IVisibleColumn
+    IVisibleColumn,
+    ColumnType
 } from 'dash-table/components/Table/props';
 import { TooltipSyntax } from 'dash-table/tooltips/props';
 
 export enum AppMode {
+    Date = 'date',
     Default = 'default',
     FixedTooltips = 'fixed,tooltips',
     FixedVirtualized = 'fixed,virtualized',
@@ -176,6 +178,37 @@ function getTypedState() {
     return state;
 }
 
+function getDateState() {
+    const state = getTypedState();
+
+    (state.tableProps.columns || []).forEach(column => {
+        if (column.id === 'ccc') {
+            column.name = ['Date', 'only'];
+            column.type = ColumnType.Datetime;
+            column.validation = { allow_YY: true };
+            (state.tableProps.data || []).forEach((row, i) => {
+                const d = new Date(Date.UTC(2018, 0, 1));
+                // three day increment
+                d.setUTCDate(3 * i + 1);
+                // date only
+                row.ccc = d.toISOString().substr(0, 10);
+            });
+        } else if (column.id === 'ddd') {
+            column.name = ['Date', 'with', 'time'];
+            column.type = ColumnType.Datetime;
+            (state.tableProps.data || []).forEach((row, i) => {
+                const d = new Date(Date.UTC(2018, 0, 1));
+                // two hours and 11 seconds increment
+                d.setUTCSeconds(i * 7211);
+                // datetime ending with seconds
+                row.ddd = d.toISOString().substr(0, 19).replace('T', ' ');
+            });
+        }
+    });
+
+    return state;
+}
+
 function getVirtualizedState() {
     const mock = generateMockData(5000);
 
@@ -218,6 +251,8 @@ function getState() {
     const mode = Environment.searchParams.get('mode');
 
     switch (mode) {
+        case AppMode.Date:
+            return getDateState();
         case AppMode.FixedTooltips:
             return getFixedTooltipsState();
         case AppMode.FixedVirtualized: