diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 25cc7c4..3a13dad 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -517,7 +517,7 @@ function template_preprocess_time(&$variables) {
 function template_preprocess_datetime_form(&$variables) {
   $element = $variables['element'];
 
-  $variables['attributes'] = array();
+  $variables['attributes'] = $element['#attributes'];
   if (isset($element['#id'])) {
     $variables['attributes']['id'] = $element['#id'];
   }
@@ -525,6 +525,10 @@ function template_preprocess_datetime_form(&$variables) {
     $variables['attributes']['class'] = (array) $element['#attributes']['class'];
   }
 
+  if (!empty($element['#title'])) {
+    $variables['title'] = $element['#title'];
+  }
+
   $variables['content'] = $element;
 }
 
@@ -541,10 +545,6 @@ function template_preprocess_datetime_form(&$variables) {
 function template_preprocess_datetime_wrapper(&$variables) {
   $element = $variables['element'];
 
-  if (!empty($element['#title'])) {
-    $variables['title'] = $element['#title'];
-  }
-
   // Suppress error messages.
   $variables['errors'] = NULL;
 
diff --git a/core/lib/Drupal/Core/Datetime/Element/Datetime.php b/core/lib/Drupal/Core/Datetime/Element/Datetime.php
index a68927a..f4279d2 100644
--- a/core/lib/Drupal/Core/Datetime/Element/Datetime.php
+++ b/core/lib/Drupal/Core/Datetime/Element/Datetime.php
@@ -313,6 +313,9 @@ public static function processDatetime(&$element, FormStateInterface $form_state
       }
     }
 
+    // Make sure that the datetime element keeps the #states property.
+    $element['#states'] = isset($element['#states']) ? $element['#states'] : [];
+
     return $element;
   }
 
diff --git a/core/themes/classy/templates/form/datetime-form.html.twig b/core/themes/classy/templates/form/datetime-form.html.twig
index f56182f..f155745 100644
--- a/core/themes/classy/templates/form/datetime-form.html.twig
+++ b/core/themes/classy/templates/form/datetime-form.html.twig
@@ -6,10 +6,29 @@
  * Available variables:
  * - attributes: HTML attributes for the datetime form element.
  * - content: The datelist form element to be output.
+ * - title: The title of the form element.
+ * - title_attributes: HTML attributes for the title wrapper.
  *
  * @see template_preprocess_datetime_form()
  */
 #}
-<div{{ attributes.addClass('container-inline') }}>
+{%
+  set title_classes = [
+    'label',
+    required ? 'js-form-required',
+    required ? 'form-required',
+  ]
+%}
+{%
+  set container_classes = [
+    'js-form-wrapper',
+    'form-wrapper',
+    'container-inline'
+  ]
+%}
+<div{{ attributes.addClass(container_classes) }}>
+  {% if title %}
+    <h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
+  {% endif %}
   {{ content }}
 </div>
diff --git a/core/themes/classy/templates/form/datetime-wrapper.html.twig b/core/themes/classy/templates/form/datetime-wrapper.html.twig
index 3f6aa59..4712d9f 100644
--- a/core/themes/classy/templates/form/datetime-wrapper.html.twig
+++ b/core/themes/classy/templates/form/datetime-wrapper.html.twig
@@ -5,24 +5,12 @@
  *
  * Available variables:
  * - content: The form element to be output, usually a datelist, or datetime.
- * - title: The title of the form element.
- * - title_attributes: HTML attributes for the title wrapper.
  * - description: Description text for the form element.
  * - required: An indicator for whether the associated form element is required.
  *
  * @see template_preprocess_datetime_wrapper()
  */
 #}
-{%
-  set title_classes = [
-    'label',
-    required ? 'js-form-required',
-    required ? 'form-required',
-  ]
-%}
-{% if title %}
-  <h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
-{% endif %}
 {{ content }}
 {% if errors %}
   <div class="form-item--error-message">