API Use HTML5 DateField

See silverstripe/silverstripe-framework#6626

client/lang/en.js

@@ -13,6 +13,7 @@ if (typeof(ss) === 'undefined' || typeof(ss.i18n) === 'undefined') {
     "CMSMAIN.BATCH_RESTORE_PROMPT": "You have {num} page(s) selected.\n\nDo you really want to restore to stage?\n\nChildren of archived pages will be restored to the root level, unless those pages are also being restored.",
     "CMSMAIN.BATCH_UNPUBLISH_PROMPT": "You have {num} page(s) selected.\n\nDo you really want to unpublish",
     "CMSMAIN.SELECTONEPAGE": "Please select at least one page",
+    "DateField.DateFormatExample": "Example",
     "File.NO_SIZE": "N\/A",
     "FormBuilderModal.CLOSE": "Close",
     "LeftAndMain.CONFIRMUNSAVED": "Are you sure you want to navigate away from this page?\n\nWARNING: Your changes have not been saved.\n\nPress OK to continue, or Cancel to stay on the current page.",

client/lang/src/en.js

@@ -6,6 +6,7 @@
     "CMSMAIN.BATCH_RESTORE_PROMPT": "You have {num} page(s) selected.\n\nDo you really want to restore to stage?\n\nChildren of archived pages will be restored to the root level, unless those pages are also being restored.",
     "CMSMAIN.BATCH_UNPUBLISH_PROMPT": "You have {num} page(s) selected.\n\nDo you really want to unpublish",
     "CMSMAIN.SELECTONEPAGE": "Please select at least one page",
+    "DateField.DateFormatExample": "Example",
     "File.NO_SIZE": "N\/A",
     "FormBuilderModal.CLOSE": "Close",
     "LeftAndMain.CONFIRMUNSAVED": "Are you sure you want to navigate away from this page?\n\nWARNING: Your changes have not been saved.\n\nPress OK to continue, or Cancel to stay on the current page.",

client/src/.modernizrrc

@@ -0,0 +1,9 @@
+{
+  "minify": true,
+  "options": [
+    "setClasses"
+  ],
+  "feature-detects": [
+    "inputtypes"
+  ]
+}

client/src/bundles/bundle.js

@@ -67,7 +67,6 @@ require('../legacy/ConfirmedPasswordField.js');
 require('../legacy/SelectionGroup.js');
 require('../legacy/DateField.js');
 require('../legacy/ToggleCompositeField.js');
-require('../legacy/MemberDatetimeOptionsetField.js');
 require('../legacy/TreeDropdownField.js');
 require('../legacy/DateField.js');
 require('../legacy/HtmlEditorField.js');

client/src/legacy/DateField.js

@@ -1,46 +1,54 @@
 import $ from 'jQuery';
+import i18n from 'i18n';
+import moment from 'moment';
+import modernizr from 'modernizr';
 
-// entwine also required, but can't be included more than once without error
-require('../../../thirdparty/jquery-ui/jquery-ui.js');
+require('../../../thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
 
-$.fn.extend({
-  ssDatepicker: function(opts) {
-    return $(this).each(function() {
-
-      // disabled, readonly or already applied
-      if ($(this).prop('disabled') || $(this).prop('readonly') || $(this).hasClass('hasDatepicker')) {
+$.entwine('ss', function($) {
+  $('input[type=date]').entwine({
+    onadd: function () {
+      // Browser supports type=date natively
+      if (modernizr.inputtypes.date) {
         return;
       }
 
-      $(this).siblings("button").addClass("ui-icon ui-icon-calendar");
-
-      let config = $.extend(
-          {},
-          opts || {},
-          $(this).data(),
-          $(this).data('jqueryuiconfig')
-        );
-      if(!config.showcalendar) {
+      // disabled, readonly or already applied
+      if (this.prop('disabled') || this.prop('readonly') || this.hasClass('hasDatepicker')) {
         return;
       }
 
-      if(config.locale && $.datepicker.regional[config.locale]) {
-        // Note: custom config overrides regional settings
-        config = $.extend({}, $.datepicker.regional[config.locale], config);
-      }
-
-      // Initialize and open a datepicker
-      // live() doesn't have "onmatch", and jQuery.entwine is a bit too heavyweight
-      // for this, so we need to do this onclick.
-      $(this).datepicker(config);
-    });
-  }
-});
-
-$(document).on("click", ".field.date input.text,input.text.date", function() {
-  $(this).ssDatepicker();
-
-  if($(this).data('datepicker')) {
-    $(this).datepicker('show');
-  }
+      // Duplicate input field to store ISO value
+      const hiddenInput = $('<input/>', {type: 'hidden', name: this.attr('name'), value: this.val()});
+      this.parent().append(hiddenInput);
+
+      // Avoid original field being saved
+      this.removeAttr('name');
+
+      // Set localised value in original field
+      moment.locale(this.attr('lang'));
+      const isoDate = this.val();
+      const localDate = moment(isoDate).format('L');
+      this.val(localDate);
+
+      // Set useful localised placeholder
+      this.attr(
+        'placeholder',
+        i18n._t('DateField.DateFormatExample') + ': ' + moment().endOf('month').format('L')
+      );
+
+      this.updateValue();
+    },
+    onchange: function () {
+      // TODO Validation
+      // TODO Set localised Placeholder
+
+      this.updateValue();
+    },
+    updateValue: function () {
+      const localDate = this.val();
+      const isoDate = moment(localDate, 'L').format('YYYY-MM-DD');
+      this.parent().find('input[type=hidden]').val(isoDate);
+    }
+  });
 });

package.json

@@ -44,7 +44,11 @@
     "isomorphic-fetch": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
     "jquery-sizes": "^0.33.0",
     "json-js": "^1.1.2",
+    "json-loader": "^0.5.4",
     "merge": "^1.2.0",
+    "modernizr": "^3.4.0",
+    "modernizr-loader": "^1.0.1",
+    "moment": "^2.18.1",
     "page.js": "^4.13.3",
     "qs": "^6.1.0",
     "react": "^15.3.1",

webpack.config.js

@@ -41,6 +41,9 @@ const config = [
     resolve: {
       root: [__dirname, path.resolve(__dirname, PATHS.ADMIN_JS_SRC)],
       modulesDirectories: [PATHS.MODULES],
+      alias: {
+        modernizr$: path.resolve(__dirname, `${PATHS.ADMIN_JS_SRC}/.modernizrrc`),
+      },
     },
     output: {
       path: 'client/dist',
@@ -105,6 +108,10 @@ const config = [
           test: '/i18n.js/',
           loader: 'script-loader',
         },
+        {
+          test: /\.modernizrrc$/,
+          loader: 'modernizr!json',
+        },
       ],
     },
     plugins: [

yarn.lock

@@ -158,6 +158,13 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@~0.1.15:
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-0.1.16.tgz#cfd01e0fbba3d6caed049fbd758d40f65196f57c"
+  dependencies:
+    underscore "~1.7.0"
+    underscore.string "~2.4.0"
+
 arr-diff@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
@@ -250,6 +257,10 @@ atob@~1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/atob/-/atob-1.1.3.tgz#95f13629b12c3a51a5d215abdce2aa9f32f80773"
 
+autolinker@~0.15.0:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-0.15.3.tgz#342417d8f2f3461b14cf09088d5edf8791dc9832"
+
 autoprefixer@^6.3.1, autoprefixer@^6.4.0:
   version "6.7.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.6.tgz#00f05656c7ef73de9d2fd9b4668f6ef6905a855a"
@@ -1393,9 +1404,9 @@ dnd-core@^2.2.4:
     lodash "^4.2.0"
     redux "^3.2.0"
 
-doctrine@^1.2.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+doctrine@1.2.3, doctrine@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.2.3.tgz#6aec6bbd62cf89dd498cae70c0ed9f49da873a6a"
   dependencies:
     esutils "^2.0.2"
     isarray "^1.0.0"
@@ -1731,6 +1742,10 @@ file-loader@^0.9.0:
   dependencies:
     loader-utils "~0.2.5"
 
+[email protected]:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/file/-/file-0.2.2.tgz#c3dfd8f8cf3535ae455c2b423c2e52635d76b4d3"
+
 filename-regex@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
@@ -1760,6 +1775,10 @@ find-cache-dir@^0.1.1:
     mkdirp "^0.5.1"
     pkg-dir "^1.0.0"
 
+[email protected]:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.0.tgz#33c44b429ab2b2f0646299c5f9f718f376ff8d54"
+
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -2714,6 +2733,10 @@ json-js@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/json-js/-/json-js-1.1.2.tgz#ebc405aa7dfd1477ca07f2f1e1d262afc4ab49b9"
 
+json-loader@^0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.4.tgz#8baa1365a632f58a3c46d20175fc6002c96e37de"
+
 [email protected]:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
@@ -3008,7 +3031,7 @@ lodash.words@^3.0.0:
   dependencies:
     lodash._root "^3.0.0"
 
-lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
+lodash@4.17.4, lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -3138,12 +3161,33 @@ minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
-"mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+[email protected], "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
     minimist "0.0.8"
 
+modernizr-loader@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/modernizr-loader/-/modernizr-loader-1.0.1.tgz#e52a6f9a12578b944abbd6cbd65c863ea4a83f49"
+
+modernizr@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/modernizr/-/modernizr-3.4.0.tgz#2eb7617677a6b6bb72a2d3b60fe4e702c4c9d067"
+  dependencies:
+    doctrine "1.2.3"
+    file "0.2.2"
+    find-parent-dir "0.3.0"
+    lodash "4.17.4"
+    mkdirp "0.5.1"
+    remarkable "^1.6.2"
+    requirejs "2.1.22"
+    yargs "6.6.0"
+
+moment@^2.18.1:
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
+
 [email protected]:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
@@ -4124,6 +4168,13 @@ regjsparser@^0.1.4:
   dependencies:
     jsesc "~0.5.0"
 
+remarkable@^1.6.2:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-1.7.1.tgz#aaca4972100b66a642a63a1021ca4bac1be3bff6"
+  dependencies:
+    argparse "~0.1.15"
+    autolinker "~0.15.0"
+
 repeat-element@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
@@ -4180,6 +4231,10 @@ require-uncached@^1.0.2:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
+[email protected]:
+  version "2.1.22"
+  resolved "https://registry.yarnpkg.com/requirejs/-/requirejs-2.1.22.tgz#dd78fd2d34180c0d62c724b5b8aebc0664e0366f"
+
 resolve-from@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
@@ -4718,6 +4773,14 @@ uncontrollable@^4.0.1:
   dependencies:
     invariant "^2.1.0"
 
+underscore.string@~2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-2.4.0.tgz#8cdd8fbac4e2d2ea1e7e2e8097c42f442280f85b"
+
+underscore@~1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.7.0.tgz#6bbaf0877500d36be34ecaa584e0db9fef035209"
+
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
@@ -4979,42 +5042,42 @@ yargs-parser@^4.2.0:
   dependencies:
     camelcase "^3.0.0"
 
-yargs@^4.7.1:
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
+yargs@6.6.0, yargs@^6.3.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
   dependencies:
+    camelcase "^3.0.0"
     cliui "^3.2.0"
     decamelize "^1.1.1"
     get-caller-file "^1.0.1"
-    lodash.assign "^4.0.3"
     os-locale "^1.4.0"
     read-pkg-up "^1.0.1"
     require-directory "^2.1.1"
     require-main-filename "^1.0.1"
     set-blocking "^2.0.0"
-    string-width "^1.0.1"
+    string-width "^1.0.2"
     which-module "^1.0.0"
-    window-size "^0.2.0"
     y18n "^3.2.1"
-    yargs-parser "^2.4.1"
+    yargs-parser "^4.2.0"
 
-yargs@^6.3.0:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
+yargs@^4.7.1:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
   dependencies:
-    camelcase "^3.0.0"
     cliui "^3.2.0"
     decamelize "^1.1.1"
     get-caller-file "^1.0.1"
+    lodash.assign "^4.0.3"
     os-locale "^1.4.0"
     read-pkg-up "^1.0.1"
     require-directory "^2.1.1"
     require-main-filename "^1.0.1"
     set-blocking "^2.0.0"
-    string-width "^1.0.2"
+    string-width "^1.0.1"
     which-module "^1.0.0"
+    window-size "^0.2.0"
     y18n "^3.2.1"
-    yargs-parser "^4.2.0"
+    yargs-parser "^2.4.1"
 
 yargs@~3.10.0:
   version "3.10.0"