Hide datetime time field element by default #637

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/core/ui/theme/css/datetime.css

@@ -0,0 +1,3 @@
+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:
+  css:
+    theme:
+      css/datetime.css: { }
+  js:
+    js/datetime.js: { }
+  dependencies:
+    - core/drupal
+    - core/once
 flag:
   css:
     theme:

modules/core/ui/theme/farm_ui_theme.module

@@ -25,6 +25,9 @@ function farm_ui_theme_theme($existing, $type, $theme, $path) {
  * Implements hook_element_info_alter().
  */
 function farm_ui_theme_element_info_alter(array &$info) {
+  if (isset($info['datetime'])) {
+    $info['datetime']['#attached']['library'][] = 'farm_ui_theme/datetime';
+  }
   if (isset($info['farm_map'])) {
     $info['farm_map']['#attached']['library'][] = 'farm_ui_theme/map';
   }

modules/core/ui/theme/js/datetime.js

@@ -0,0 +1,23 @@
+(function (Drupal, once) {
+  Drupal.behaviors.farm_ui_datetime = {
+    attach: function (context, settings) {
+      var wrappers = once('toggle-time', '.form-datetime-wrapper', context);
+      wrappers.forEach(this.hideTime);
+    },
+    hideTime: function (wrapper) {
+      var link = document.createElement('a');
+      link.href = 'javascript: void(0)';
+      link.innerHTML = 'Show time';
+      link.classList.add('toggle-time');
+      link.addEventListener('click', Drupal.behaviors.farm_ui_datetime.showTime);
+      wrapper.querySelector('.form-type--date').appendChild(link);
+      wrapper.querySelector('input.form-time').style.display = 'none';
+    },
+    showTime: function (event) {
+      var wrapper = event.target.closest('.form-datetime-wrapper');
+      wrapper.querySelector('input.form-time').style.display = 'block';
+      var link = wrapper.querySelector('a.toggle-time');
+      link.parentNode.removeChild(link);
+    },
+  };
+}(Drupal, once));