DrupalCon Atlanta will be held next year from 24-27 March 2025 in Atlanta, Georgia, and the Call for Speakers is now open! Do you have Drupal knowledge to share? We invite you to submit your session! Contributing your voice and expertise drives Drupal’s continued evolution and success.
Problem/Motivation
Using a form alter hook I have added a custom CSS class to a node form date input:
function test_module_form_node_form_alter(array &$form, FormStateInterface $form_state, string $form_id): void {
$form['field_test_upload_date']['widget'][0]['value']['#attributes']['class'][] = 'TEST-CSS-CLASS';
}
The CSS class is added correctly to the form date input, but is also added to 2 parent div, .form-datetime-wrapper
and .form-items-inline
.
<div class="field--type-datetime field--name-field-test-upload-date field--widget-datetime-default js-form-wrapper form-wrapper" data-drupal-selector="edit-field-test-upload-date-wrapper" id="edit-field-test-upload-date-wrapper">
<div class="TEST-CSS-CLASS form-item form-datetime-wrapper" data-drupal-selector="edit-field-test-upload-date-0-value">
<h4 class="form-item__label">Test Upload Date</h4>
<div id="edit-field-test-upload-date-0-value" class="TEST-CSS-CLASS form-items-inline" data-drupal-field-elements="date">
<div class="js-form-item form-item js-form-type-date form-type--date js-form-item-field-test-upload-date-0-value-date form-item--field-test-upload-date-0-value-date form-item--no-label">
<label for="edit-field-test-upload-date-0-value-date" class="form-item__label visually-hidden">Date</label>
<input class="TEST-CSS-CLASS form-date form-element form-element--type-date form-element--api-date" data-drupal-selector="edit-field-test-upload-date-0-value-date" type="date" placeholder="YYYY-MM-DD" data-help="Enter the date using the format YYYY-MM-DD (e.g., 2024-06-10)." id="edit-field-test-upload-date-0-value-date" name="field_test_upload_date[0][value][date]" value="" size="12">
</div>
</div>
</div>
</div>
Steps to reproduce
- Add a date field (not timestamp) to a content type
- Use a form alter to add a custom CSS class to the form data input
- Create a new node of the content type to view the edit form
- The CSS class added should be on the element and 2 parent divs
Proposed resolution
Prevent CSS classes add to date inputs being added to related parent elements.
Remaining tasks
- Confirm bug
- Identify cause
- Create MR with fix
User interface changes
None
API changes
None
Data model changes
None
Comments
Comment #2
pcate CreditAttribution: pcate commentedComment #3
pcate CreditAttribution: pcate commentedI just tested adding a custom attribute to the data input as well. In that case it is added to the date input and
.form-datetime-wrapper
parent div, but not the.form-items-inline
parent div.Comment #4
saschaeggiHow is that related to Gin? 🤔
Comment #5
pcate CreditAttribution: pcate commentedSo I guess that was an assumption on my part since I'm using the Gin admin theme and Gin has twig template overrides for some date related elements such as
datetime-wrapper.html.twig
, as well as other form customizations.Comment #6
saschaeggiIt wasn't meant in a rude way btw, just clarifying if it is indeed related specifically to Gin or if it should be moved to another issue queue.
Comment #7
saschaeggi