diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php index 946a32afa..e6d3b7cd7 100644 --- a/app/src/View/Helper/FieldHelper.php +++ b/app/src/View/Helper/FieldHelper.php @@ -30,11 +30,12 @@ namespace App\View\Helper; +use Cake\I18n\FrozenTime; use \Cake\Utility\Inflector; 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 +91,66 @@ 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. + $pickerDateTime = ''; // for handling time + $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 + if(!empty($coptions['value'])) { + $pickerDateTime = $coptions['value']; + } + $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 f75048ac7..5f352ad51 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 356bd917b..ffa9f58d2 100644 --- a/app/templates/layout/default.php +++ b/app/templates/layout/default.php @@ -181,7 +181,7 @@ element('dialog'); ?> - Html->script('jstimezonedetect/jstz.min.js'); ?> + Html->script('jstimezonedetect/jstz.min.js'); ?>