diff --git a/app/resources/locales/en_US/field.po b/app/resources/locales/en_US/field.po
index 4ecc006a2..f16b3b468 100644
--- a/app/resources/locales/en_US/field.po
+++ b/app/resources/locales/en_US/field.po
@@ -86,6 +86,18 @@ msgstr "Country Code"
msgid "created"
msgstr "Created"
+msgid "datepicker.am"
+msgstr "AM"
+
+msgid "datepicker.hour"
+msgstr "Hour"
+
+msgid "datepicker.pm"
+msgstr "PM"
+
+msgid "datepicker.minute"
+msgstr "Minute"
+
msgid "date_of_birth"
msgstr "Date of Birth"
diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
index 946a32afa..bbf752b45 100644
--- a/app/src/View/Helper/FieldHelper.php
+++ b/app/src/View/Helper/FieldHelper.php
@@ -34,7 +34,7 @@
use Cake\View\Helper;
class FieldHelper extends Helper {
- public $helpers = ['Form', 'Html'];
+ public $helpers = ['Form', 'Html', 'Url'];
// Is this read-only or read-write?
protected $editable = true;
@@ -90,18 +90,86 @@ public function control(string $fieldName,
// Append the timezone to the label
$label = __d('field', $fieldName.".tz", [$this->_View->get('vv_tz')]);
- // Render these fields as datepickers instead of plain text boxes
- $coptions['class'] = 'datepicker-' . ($fieldName == 'valid_from' ? "f" : "u");
+ // A datetime field will be rendered as plain text input with adjacent date and time pickers
+ // that will interact with the field value. Allowing direct access to the input field is for
+ // accessibility purposes.
+ $coptions['class'] = 'form-control datepicker';
+ $coptions['placeholder'] = 'YYYY-MM-DD HH:MM:SS'; // TODO: test for date-only inputs and send only the date
+ $coptions['id'] = $fieldName;
$entity = $this->_View->get('vv_obj');
+ $pickerDate = '';
if(!empty($entity->$fieldName)) {
// Adjust the time back to the user's timezone
$coptions['value'] = $entity->$fieldName->i18nFormat("yyyy-MM-dd HH:mm:ss", $this->_View->get('vv_tz'));
+ $pickerDate = $entity->$fieldName->i18nFormat("yyyy-MM-dd", $this->_View->get('vv_tz'));
}
+ // Create a text field to hold our value.
$controlCode = $this->Form->text($fieldName, $coptions);
- $liClass = " modelbox-data";
+
+ // Create a date/time picker. The yyyy-MM-dd format is set above in $pickerDate.
+ $pickerId = 'datepicker-' . $fieldName;
+ $pickerTarget = $fieldName;
+ $pickerTimed = true; // TODO: set false if date-only
+ $pickerAmPm = false; // TODO: allow change between AM/PM and 24-hour mode
+
+ $controlCode .= '
+
+
+
+
+
';
+
+ $liClass = "fields-datepicker";
} else {
if($fieldName != 'status'
&& !isset($options['empty'])
diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php
index 88f34443a..1c0d47083 100644
--- a/app/templates/element/javascript.php
+++ b/app/templates/element/javascript.php
@@ -169,50 +169,10 @@
}
});
- // Datepickers
-
-
-
-/* XXX CFM-107 Hide datepickers until replaced with new approach
- $(".datepicker-f").datepicker({
- changeMonth: true,
- changeYear: true,
- dateFormat: "yy-mm-dd 00:00:00",
- numberOfMonths: 1,
- showButtonPanel: false,
- showOtherMonths: true,
- selectOtherMonths: true,
- onSelect: function(selectedDate) {
- $(this).closest('.mdl-textfield').addClass('is-dirty');
- }
- }).bind('click',function () {
- $("#ui-datepicker-div").appendTo($(this).closest('.modelbox-data'));
- });
-
- $(".datepicker-u").datepicker({
- changeMonth: true,
- changeYear: true,
- dateFormat: "yy-mm-dd 23:59:59",
- numberOfMonths: 1,
- showButtonPanel: false,
- showOtherMonths: true,
- selectOtherMonths: true,
- onSelect: function(selectedDate) {
- $(this).closest('.mdl-textfield').addClass('is-dirty');
- }
- }).bind('click',function () {
- $("#ui-datepicker-div").appendTo($(this).closest('.modelbox-data'));
- });
-*/
-
// Add loading animation when a form is submitted, when any item with a "spin" class is clicked,
- // or on any button or anchor tag lacking the .nospin class.
- $("input[type='submit'], button:not(.nospin), a:not(.nospin), .spin").click(function() {
+ // or on any anchor tag lacking the .nospin class. We do not automatically add this to buttons
+ // because they are often on-page controls. Add a "spin" class to buttons that need it.
+ $("input[type='submit'], a:not('.nospin'), .spin").click(function() {
displaySpinner();
diff --git a/app/templates/layout/default.php b/app/templates/layout/default.php
index f5fbea63c..3552c8c0b 100644
--- a/app/templates/layout/default.php
+++ b/app/templates/layout/default.php
@@ -40,7 +40,7 @@
- Html->meta('viewport', 'width=device-width, initial-scale=1, shrink-to-fit=no') . "\n"; ?>
+ Html->meta('viewport', 'width=device-width, initial-scale=1.0') . "\n"; ?>
Html->charset(); ?>
<?= (!empty($vv_title) ? $vv_title : __('registry.meta.registry')); ?>
@@ -191,7 +191,7 @@ class="toast-container"
element('dialog'); ?>
- Html->script('jstimezonedetect/jstz.min.js'); ?>
+ Html->script('jstimezonedetect/jstz.min.js'); ?>