Datetime field type can not be rendered

Created on 19 April 2023, over 1 year ago
Updated 26 March 2024, 9 months ago

Problem/Motivation

Can not use datetime type field in AJAX AppendCommand, because the renderer service render empty div container.

Steps to reproduce

If you use this code:

    $form['datetime_test'] = [
      '#type' => 'datetime',
      '#title' => t('Datetime test grisko'),
      '#date_date_element' => 'date',
      '#date_time_element' => 'time'
    ];

    $form['datetime_test2'] = $form['datetime_test'];
    $form['datetime_test2']['#title'] = t('Datetime test grisko2');

    $form['datetime_test_rendered_grisko'] = [
      '#markup' => '<div class="grisko hablaty">' . \Drupal::service('renderer')->render($form['datetime_test2']) . '</div>'
    ];

You will get this result:

<div id="edit-datetime-test" data-drupal-field-elements="date-time" class="container-inline">
  <div class="js-form-item form-item js-form-type-date form-type-date js-form-item-datetime-test-date form-item-datetime-test-date form-no-label">
      <label for="edit-datetime-test-date" class="visually-hidden">Datum</label>
        <input data-drupal-selector="edit-datetime-test-date" title="Datum (z. B. 2023-04-19)" type="date" data-drupal-date-format="Y-m-d" placeholder="YYYY-MM-DD" data-help="Enter the date using the format YYYY-MM-DD (e.g., 2023-04-19)." id="edit-datetime-test-date" name="datetime_test[date]" value="" size="12" class="form-date">

        </div>
<div class="js-form-item form-item js-form-type-date form-type-date js-form-item-datetime-test-time form-item-datetime-test-time form-no-label">
      <label for="edit-datetime-test-time" class="visually-hidden">Zeit</label>
        <input data-drupal-selector="edit-datetime-test-time" title="Enter a valid time - e.g. 05:01" type="time" step="60" placeholder="hh:mm:ss" data-help="Enter the time using the format hh:mm:ss (e.g., 05:01:37)." id="edit-datetime-test-time" name="datetime_test[time]" value="" size="12" class="form-time">

        </div>
</div>
<div class="grisko hablaty">  <h4 class="label">Datetime test grisko2</h4>
<div data-drupal-field-elements="date-time" class="container-inline">
  
</div>

</div>

Proposed resolution

Render the datetime element correctly.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

πŸ› Bug report
Status

Active

Version

11.0 πŸ”₯

Component
RenderΒ  β†’

Last updated about 8 hours ago

Created by

πŸ‡­πŸ‡ΊHungary riskogab

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024