Hide datetime time field element by default

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Move land and structure type fields higher up for consistency #632](https://github.com/farmOS/farmOS/pull/632)
 - [Change asset action date pickers to use HTML5 calendar widgets #630](https://github.com/farmOS/farmOS/pull/630)
 - [Allow setting time in bulk actions and quick forms via datetime element #635](https://github.com/farmOS/farmOS/pull/635)
+- [Hide datetime time field element by default #637](https://github.com/farmOS/farmOS/pull/637)
 
 ### Fixed
 

modules/asset/group/src/Form/AssetGroupActionForm.php

@@ -140,6 +140,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       '#title' => $this->t('Date'),
       '#default_value' => new DrupalDateTime('midnight'),
       '#required' => TRUE,
+      '#toggle_time' => TRUE,
     ];
 
     $form['group'] = [

modules/core/field/config/schema/farm_field.schema.yml

@@ -17,3 +17,11 @@ field.formatter.settings.hideable_boolean:
     hide_if_true:
       type: boolean
       label: 'Hide if true'
+
+# Schema for datetime_timestamp_optional field widget.
+field.widget.settings.datetimte_timestamp_optional:
+  type: mapping
+  mapping:
+    toggle_time:
+      type: boolean
+      label: 'Toggle time'

modules/core/field/src/FarmFieldFactory.php

@@ -818,6 +818,9 @@ protected function modifyTimestampField(BaseFieldDefinition &$field, array $opti
     // Build form and view display settings.
     $field->setDisplayOptions('form', [
       'type' => 'datetime_timestamp_optional',
+      'settings' => [
+        'toggle_time' => TRUE,
+      ],
       'weight' => $options['weight']['form'] ?? 0,
     ]);
     $field->setDisplayOptions('view', [

modules/core/field/src/Plugin/Field/FieldWidget/TimestampDatetimeOptionalWidget.php

@@ -26,6 +26,29 @@
  */
 class TimestampDatetimeOptionalWidget extends TimestampDatetimeWidget {
 
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+    $settings = parent::defaultSettings();
+    $settings['toggle_time'] = TRUE;
+    return $settings;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $form = parent::settingsForm($form, $form_state);
+    $form['toggle_time'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Toggle time'),
+      '#description' => $this->t('Default to time input hidden with a button to show time input.'),
+      '#default_value' => TRUE,
+    ];
+    return $form;
+  }
+
   /**
    * {@inheritdoc}
    */
@@ -34,6 +57,16 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
     $date_format = DateFormat::load('html_date')->getPattern();
     $time_format = DateFormat::load('html_time')->getPattern();
     $element['value']['#description'] = $this->t('Format: %format.', ['%format' => Datetime::formatExample($date_format . ' ' . $time_format)]);
+
+    // Toggle the time if the setting is enabled and no value is provided
+    // or if the provided value has a time of midnight.
+    $toggle_time = $this->getSetting('toggle_time');
+    $existing_time_midnight = FALSE;
+    if (isset($items[$delta]->value)) {
+      $datetime = DrupalDateTime::createFromTimestamp($items[$delta]->value);
+      $existing_time_midnight = (int) $datetime->format('His') === 0;
+    }
+    $element['value']['#toggle_time'] = $toggle_time && $existing_time_midnight;
     return $element;
   }
 

modules/core/location/src/Form/AssetMoveActionForm.php

@@ -171,6 +171,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       '#title' => $this->t('Date'),
       '#default_value' => new DrupalDateTime('midnight'),
       '#required' => TRUE,
+      '#toggle_time' => TRUE,
     ];
 
     $form['location'] = [

modules/core/ui/theme/css/datetime_toggle.css

@@ -0,0 +1,9 @@
+/* Hide time input elements. */
+div[data-farm-toggle-time="hide"] input.form-time {
+  display: none;
+}
+
+/* Font size for toggle time text. */
+div[data-farm-toggle-time] a.toggle-time {
+  font-size: small;
+}

modules/core/ui/theme/farm_ui_theme.libraries.yml

@@ -2,6 +2,15 @@ asset_map_popup:
   css:
     theme:
       css/asset_map_popup.css: { }
+datetime_toggle:
+  css:
+    theme:
+      css/datetime_toggle.css: { }
+  js:
+    js/datetime_toggle.js: { }
+  dependencies:
+    - core/drupal
+    - core/once
 flag:
   css:
     theme:

modules/core/ui/theme/farm_ui_theme.module

@@ -46,6 +46,16 @@ function farm_ui_theme_preprocess_toolbar(&$variables) {
   $variables['#attached']['library'][] = 'farm_ui_theme/toolbar';
 }
 
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function farm_ui_theme_preprocess_datetime_form(&$variables) {
+  if (isset($variables['element']['#toggle_time']) && $variables['element']['#toggle_time'] === TRUE) {
+    $variables['#attached']['library'][] = 'farm_ui_theme/datetime_toggle';
+    $variables['attributes']['data-farm-toggle-time'] = 'hide';
+  }
+}
+
 /**
  * Implements hook_block_view_BASE_BLOCK_ID_alter().
  */

modules/core/ui/theme/js/datetime_toggle.js

@@ -0,0 +1,22 @@
+(function (Drupal, once) {
+  Drupal.behaviors.farm_ui_datetime = {
+    attach: function (context, settings) {
+      var wrappers = once('toggle-time', '.form-datetime-wrapper div[data-farm-toggle-time="hide"]', context);
+      wrappers.forEach(this.addShowTimeButton);
+    },
+    addShowTimeButton: function (wrapper) {
+      var link = document.createElement('a');
+      link.href = 'javascript: void(0)';
+      link.innerHTML = Drupal.t('Show time');
+      link.classList.add('toggle-time');
+      link.addEventListener('click', Drupal.behaviors.farm_ui_datetime.showTime);
+      wrapper.querySelector('.form-type--date').appendChild(link);
+    },
+    showTime: function (event) {
+      var wrapper = event.target.closest('.form-datetime-wrapper div[data-farm-toggle-time]');
+      var link = wrapper.querySelector('a.toggle-time');
+      link.parentNode.removeChild(link);
+      wrapper.dataset.farmToggleTime = 'show';
+    },
+  };
+}(Drupal, once));

modules/quick/planting/src/Plugin/QuickForm/Planting.php

@@ -344,6 +344,7 @@ protected function buildLogForm(string $log_type, array $include_fields = [], ar
         '#title' => $this->t('Date'),
         '#default_value' => new DrupalDateTime('midnight'),
         '#required' => TRUE,
+        '#toggle_time' => TRUE,
       ],
       'done' => [
         '#type' => 'checkbox',