diff -u b/core/lib/Drupal/Core/Datetime/Element/Datetime.php b/core/lib/Drupal/Core/Datetime/Element/Datetime.php
--- b/core/lib/Drupal/Core/Datetime/Element/Datetime.php
+++ b/core/lib/Drupal/Core/Datetime/Element/Datetime.php
@@ -95,7 +95,7 @@
       );
     }
     else {
-      $date = $element['#default_value'];
+      $date = isset($element['#default_value']) ? $element['#default_value'] : NULL;
       if ($date instanceof DrupalDateTime && !$date->hasErrors()) {
         $input = array(
           'date'   => $date->format($element['#date_date_format']),
@@ -227,11 +227,11 @@
 
     $element['#tree'] = TRUE;
 
-    // Visibility and disability states need to be applied to the element as a
-    // whole, but the other states apply to the individual parts.
+    // Visibility states need to be applied to the element as a whole, but the
+    // other states apply to the individual parts.
     if (isset($element['#states']) && is_array($element['#states'])) {
       $wrapper_states = array_filter($element['#states'], function ($key) {
-        return in_array($key, ['visible', 'invisible', 'disabled', 'enabled']);
+        return in_array($key, ['visible', 'invisible']);
       }, ARRAY_FILTER_USE_KEY);
       $children_states = array_diff_key($element['#states'], $wrapper_states);
     }
diff -u b/core/misc/states.js b/core/misc/states.js
--- b/core/misc/states.js
+++ b/core/misc/states.js
@@ -610,6 +610,9 @@
         .prop('disabled', e.value)
         .closest('.js-form-item, .js-form-submit, .js-form-wrapper').toggleClass('form-disabled', e.value)
         .find('select, input, textarea').prop('disabled', e.value);
+      // A complex form element, like 'datetime' (one made up of multiple
+      // sub-elements) may have a label for the element as a whole.
+      $(e.target).closest('.js-complex-form-item').toggleClass('form-disabled', e.value);
 
       // Note: WebKit nightlies don't reflect that change correctly.
       // See https://bugs.webkit.org/show_bug.cgi?id=23789
@@ -621,10 +624,9 @@
       if (e.value) {
         var label = 'label' + (e.target.id ? '[for=' + e.target.id + ']' : '');
         var $label = $(e.target).attr({'required': 'required', 'aria-required': 'aria-required'}).closest('.js-form-item, .js-form-wrapper').find(label);
-        // A complex form element like 'datetime' (one made up of multiple
-        // sub-elements) may have a label for the element as a whole, which will
-        // not be a true <label>.
-        var $complexLabel = $(e.target).closest('.js-form-wrapper').find('.label');
+        // A complex form element, like 'datetime' (one made up of multiple
+        // sub-elements) may have a label for the element as a whole.
+        var $complexLabel = $(e.target).closest('.js-complex-form-item').children('label');
         // Avoids duplicate required markers on initialization.
         if (!$label.hasClass('js-form-required').length) {
           $label.addClass('js-form-required form-required');
@@ -635,7 +637,7 @@
       }
       else {
         $(e.target).removeAttr('required aria-required').closest('.js-form-item, .js-form-wrapper').find('label.js-form-required').removeClass('js-form-required form-required');
-        $(e.target).closest('.js-form-wrapper').find('.label.js-form-required').removeClass('js-form-required form-required');
+        $(e.target).closest('.js-complex-form-item').children('label').removeClass('js-form-required form-required');
       }
     }
   });
diff -u b/core/modules/datetime/tests/modules/datetime_states/src/Form/StateForm.php b/core/modules/datetime/tests/modules/datetime_states/src/Form/StateForm.php
--- b/core/modules/datetime/tests/modules/datetime_states/src/Form/StateForm.php
+++ b/core/modules/datetime/tests/modules/datetime_states/src/Form/StateForm.php
@@ -1,10 +1,5 @@
 <?php
 
-/**
- * @file
- * Contains Drupal\datetime_states\Form\StateForm.
- */
-
 namespace Drupal\datetime_states\Form;
 
 use Drupal\Core\Form\FormBase;
reverted:
--- b/core/themes/bartik/css/components/form.css
+++ a/core/themes/bartik/css/components/form.css
@@ -180,8 +180,7 @@
   border-color: #bbb;
   color: #717171;
 }
+.form-disabled label {
-.form-disabled label,
-.form-disabled .label {
   color: #717171;
 }
 
diff -u b/core/themes/classy/templates/form/datetime-wrapper.html.twig b/core/themes/classy/templates/form/datetime-wrapper.html.twig
--- b/core/themes/classy/templates/form/datetime-wrapper.html.twig
+++ b/core/themes/classy/templates/form/datetime-wrapper.html.twig
@@ -15,20 +15,25 @@
 #}
 {%
   set container_classes = [
-    'js-form-wrapper',
-    'form-wrapper',
+    'js-form-item',
+    'form-item',
+    'js-form-type-' ~ type|clean_class,
+    'form-type-' ~ type|clean_class,
+    'js-form-item-' ~ name|clean_class,
+    'form-item-' ~ name|clean_class,
+    'js-complex-form-item',
+    disabled == 'disabled' ? 'form-disabled',
   ]
 %}
 {%
   set title_classes = [
-    'label',
     required ? 'js-form-required',
     required ? 'form-required',
   ]
 %}
 <div{{ attributes.addClass(container_classes) }}>
   {% if title %}
-    <h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
+    <label{{ title_attributes.addClass(title_classes) }}>{{ title }}</label>
   {% endif %}
   {{ content }}
   {% if errors %}
diff -u b/core/themes/seven/css/components/form.css b/core/themes/seven/css/components/form.css
--- b/core/themes/seven/css/components/form.css
+++ b/core/themes/seven/css/components/form.css
@@ -52,8 +52,7 @@
 .form-item label.option input {
   vertical-align: middle;
 }
-.form-disabled label,
-.form-disabled .label {
+.form-disabled label {
   color: #737373;
 }
 .form-disabled input.form-text,
only in patch2:
unchanged:
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -573,6 +573,14 @@ function template_preprocess_datetime_wrapper(&$variables) {
     $variables['title'] = $element['#title'];
   }
 
+  // Pass elements #type and #name to template.
+  if (!empty($element['#type'])) {
+    $variables['type'] = $element['#type'];
+  }
+  if (!empty($element['#name'])) {
+    $variables['name'] = $element['#name'];
+  }
+
   // Suppress error messages.
   $variables['errors'] = NULL;
 
@@ -580,6 +588,13 @@ function template_preprocess_datetime_wrapper(&$variables) {
     $variables['description'] = $element['#description'];
   }
 
+  // For disabled datetime fields, the 'disabled' attribute should not be
+  // applied to the wrapper, but the 'form-disabled' class should be.
+  $variables['disabled'] = !empty($element['#attributes']['disabled']) ? $element['#attributes']['disabled'] : NULL;
+  if (isset($variables['attributes']['disabled'])) {
+    unset($variables['attributes']['disabled']);
+  }
+
   $variables['required'] = FALSE;
   // For required datetime fields 'form-required' & 'js-form-required' classes
   // are appended to the label attributes.
only in patch2:
unchanged:
--- a/core/modules/datetime/src/Plugin/Field/FieldWidget/DateTimeWidgetBase.php
+++ b/core/modules/datetime/src/Plugin/Field/FieldWidget/DateTimeWidgetBase.php
@@ -22,9 +22,7 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
     // identifying this item in error messages. We do not want to display this
     // title because the actual title display is handled at a higher level by
     // the Field module.
-
     $element['#theme_wrappers'][] = 'datetime_wrapper';
-    $element['#attributes']['class'][] = 'container-inline';
 
     $element['value'] = array(
       '#type' => 'datetime',
only in patch2:
unchanged:
--- a/core/modules/datetime/src/Tests/DateTimeFieldTest.php
+++ b/core/modules/datetime/src/Tests/DateTimeFieldTest.php
@@ -118,7 +118,7 @@ function testDateField() {
     // Display creation form.
     $this->drupalGet('entity_test/add');
     $this->assertFieldByName("{$field_name}[0][value][date]", '', 'Date element found.');
-    $this->assertFieldByXPath('//*[@id="edit-' . $field_name . '-wrapper"]/h4[contains(@class, "js-form-required")]', TRUE, 'Required markup found');
+    $this->assertFieldByXPath('//*[@id="edit-' . $field_name . '-wrapper"]/div/label[contains(@class, "js-form-required")]', TRUE, 'Required markup found');
     $this->assertNoFieldByName("{$field_name}[0][value][time]", '', 'Time element not found.');
 
     // Build up a date in the UTC timezone.
only in patch2:
unchanged:
--- a/core/modules/system/templates/datetime-wrapper.html.twig
+++ b/core/modules/system/templates/datetime-wrapper.html.twig
@@ -16,18 +16,25 @@
  */
 #}
 {%
+  set container_classes = [
+    'js-complex-form-item',
+  ]
+%}
+{%
   set title_classes = [
     required ? 'js-form-required',
     required ? 'form-required',
   ]
 %}
-{% if title %}
-  <h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
-{% endif %}
-{{ content }}
-{% if errors %}
-  <div>
-    {{ errors }}
-  </div>
-{% endif %}
-{{ description }}
+<div{{ attributes.addClass(container_classes) }}>
+  {% if title %}
+    <h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
+  {% endif %}
+  {{ content }}
+  {% if errors %}
+    <div>
+      {{ errors }}
+    </div>
+  {% endif %}
+  {{ description }}
+</div>
only in patch2:
unchanged:
--- a/core/themes/stable/templates/form/datetime-wrapper.html.twig
+++ b/core/themes/stable/templates/form/datetime-wrapper.html.twig
@@ -14,18 +14,25 @@
  */
 #}
 {%
+  set container_classes = [
+    'js-complex-form-item',
+  ]
+%}
+{%
   set title_classes = [
     required ? 'js-form-required',
     required ? 'form-required',
   ]
 %}
-{% if title %}
-  <h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
-{% endif %}
-{{ content }}
-{% if errors %}
-  <div>
-    {{ errors }}
-  </div>
-{% endif %}
-{{ description }}
+<div{{ attributes.addClass(container_classes) }}>
+  {% if title %}
+    <h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
+  {% endif %}
+  {{ content }}
+  {% if errors %}
+    <div>
+      {{ errors }}
+    </div>
+  {% endif %}
+  {{ description }}
+</div>