HTML5 Date and Time Fields

client/dist/styles/bundle.css

@@ -8872,7 +8872,7 @@ fieldset{
 }
 
 .field input.time{
-  width:88px;
+  width:112px;
 }
 
 .field.remove-splitter{

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,58 @@
 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);
-      }
+      // Duplicate input field to store ISO value
+      const hiddenInput = $('<input/>', { type: 'hidden', name: this.attr('name'), value: this.val() });
+      this.parent().append(hiddenInput);
 
-      // 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();
+      // Avoid original field being saved
+      this.removeAttr('name');
 
-  if($(this).data('datepicker')) {
-    $(this).datepicker('show');
-  }
+      // Set localised value in original field
+      moment.locale(this.attr('lang'));
+      const isoDate = this.val();
+      let localDate = '';
+      if (isoDate) {
+        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
+      this.updateValue();
+    },
+    updateValue: function () {
+      const localDate = this.val();
+      let isoDate = '';
+      if (localDate) {
+        isoDate = moment(localDate, 'L').format('YYYY-MM-DD');
+      }
+      this.parent().find('input[type=hidden]').val(isoDate);
+    },
+  });
 });

client/src/styles/legacy/_forms.scss

@@ -305,7 +305,7 @@ form.small .field, .field.small {
   }
 
 	input.time {
-		width: ($grid-x * 11); // smaller time field, since input is restricted
+		width: ($grid-x * 14); // smaller time field, since input is restricted
 	}
 
 	/* Hides borders in settings/access. Activated from JS */

code/LeftAndMain.php

@@ -499,12 +499,6 @@ protected function init()
         if (!empty($member->Locale)) {
             i18n::set_locale($member->Locale);
         }
-        if (!empty($member->DateFormat)) {
-            i18n::config()->date_format = $member->DateFormat;
-        }
-        if (!empty($member->TimeFormat)) {
-            i18n::config()->time_format = $member->TimeFormat;
-        }
 
         // can't be done in cms/_config.php as locale is not set yet
         CMSMenu::add_link(

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",