reverted:
--- b/core/includes/theme.inc
+++ a/core/includes/theme.inc
@@ -517,7 +517,7 @@
 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,10 +525,6 @@
     $variables['attributes']['class'] = (array) $element['#attributes']['class'];
   }
 
-  if (!empty($element['#title'])) {
-    $variables['title'] = $element['#title'];
-  }
-
   $variables['content'] = $element;
 }
 
@@ -545,6 +541,10 @@
 function template_preprocess_datetime_wrapper(&$variables) {
   $element = $variables['element'];
 
+  if (!empty($element['#title'])) {
+    $variables['title'] = $element['#title'];
+  }
+
   // Suppress error messages.
   $variables['errors'] = NULL;
 
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
@@ -232,6 +232,19 @@
 
     $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.
+    if (isset($element['#states']) && is_array($element['#states'])) {
+      $wrapper_states = array_filter($element['#states'], function ($key) {
+        return in_array($key, ['visible', 'invisible', 'disabled', 'enabled']);
+      }, ARRAY_FILTER_USE_KEY);
+      $children_states = array_diff_key($element['#states'], $wrapper_states);
+    }
+    else {
+      $wrapper_states = $children_states = [];
+    }
+    $element['#states'] = $wrapper_states;
+
     if ($element['#date_date_element'] != 'none') {
 
       $date_format = $element['#date_date_element'] != 'none' ? static::getHtml5DateFormat($element) : '';
@@ -269,6 +282,7 @@
         '#size' => max(12, strlen($element['#value']['date'])),
         '#error_no_message' => TRUE,
         '#date_date_format' => $element['#date_date_format'],
+        '#states' => $children_states,
       );
 
       // Allows custom callbacks to alter the element.
@@ -301,6 +315,7 @@
         '#required' => $element['#required'],
         '#size' => 12,
         '#error_no_message' => TRUE,
+        '#states' => $children_states,
       );
 
       // Allows custom callbacks to alter the element.
@@ -313,9 +328,6 @@
       }
     }
 
-    // Make sure that the datetime element keeps the #states property.
-    $element['#states'] = isset($element['#states']) ? $element['#states'] : [];
-
     return $element;
   }
 
reverted:
--- b/core/themes/classy/templates/form/datetime-form.html.twig
+++ a/core/themes/classy/templates/form/datetime-form.html.twig
@@ -6,29 +6,10 @@
  * 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 -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
@@ -8,15 +8,35 @@
+ * - 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()
  */
 #}
-{{ content }}
-{% if errors %}
-  <div class="form-item--error-message">
-    <strong>{{ errors }}</strong>
-  </div>
-{% endif %}
-{% if description %}
-  <div class="description">{{ description }}</div>
-{% endif %}
+{%
+  set container_classes = [
+    'js-form-wrapper',
+    'form-wrapper',
+  ]
+%}
+{%
+  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>
+  {% endif %}
+  {{ content }}
+  {% if errors %}
+    <div class="form-item--error-message">
+      <strong>{{ errors }}</strong>
+    </div>
+  {% endif %}
+  {% if description %}
+    <div class="description">{{ description }}</div>
+  {% endif %}
+</div>
only in patch2:
unchanged:
--- a/core/misc/states.js
+++ b/core/misc/states.js
@@ -609,13 +609,21 @@
       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');
         // Avoids duplicate required markers on initialization.
         if (!$label.hasClass('js-form-required').length) {
           $label.addClass('js-form-required form-required');
         }
+        if (!$complexLabel.hasClass('js-form-required').length) {
+          $complexLabel.addClass('js-form-required form-required');
+        }
       }
       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');
       }
     }
   });
only in patch2:
unchanged:
--- /dev/null
+++ b/core/modules/datetime/tests/modules/datetime_states/datetime_states.info.yml
@@ -0,0 +1,8 @@
+name: 'Datetime #states test'
+type: module
+description: 'Provides an example demonstrating how form #states affect datetime elements.'
+package: Testing
+version: VERSION
+core: 8.x
+dependencies:
+  - datetime
only in patch2:
unchanged:
--- /dev/null
+++ b/core/modules/datetime/tests/modules/datetime_states/datetime_states.routing.yml
@@ -0,0 +1,6 @@
+datetime_states.example:
+  path: '/datetime/states-example'
+  defaults:
+    _form: '\Drupal\datetime_states\Form\StateForm'
+  requirements:
+    _access: 'TRUE'
only in patch2:
unchanged:
--- /dev/null
+++ b/core/modules/datetime/tests/modules/datetime_states/src/Forms/StateForm.php
@@ -0,0 +1,70 @@
+<?php
+
+/**
+ * @file
+ * Contains Drupal\datetime_states\StateForm.
+ */
+
+namespace Drupal\datetime_states;
+
+use Drupal\Core\Form\FormBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Defines a settings page for the File Hosting module.
+ */
+class StateForm extends FormBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return "datetime_states_form";
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+    $form['toggle_invisible'] = array(
+      '#type' => 'checkbox',
+      '#title' => $this->t('Invisible'),
+    );
+    $form['toggle_disabled'] = array(
+      '#type' => 'checkbox',
+      '#title' => $this->t('Disabled'),
+    );
+    $form['toggle_required'] = array(
+      '#type' => 'checkbox',
+      '#title' => $this->t('Required'),
+    );
+
+
+    $form['date'] = array(
+      '#type' => 'datetime',
+      '#title' => $this->t('Datetime'),
+      '#description' => $this->t('A datetime form element.'),
+      '#states' => [
+        'invisible' => [
+          ':input[name="toggle_invisible"]' => ['checked' => TRUE],
+        ],
+        'disabled' => [
+          ':input[name="toggle_disabled"]' => ['checked' => TRUE],
+        ],
+        'required' => [
+          ':input[name="toggle_required"]' => ['checked' => TRUE],
+        ],
+      ],
+    );
+
+    return parent::buildForm($form, $form_state);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+
+  }
+
+}
only in patch2:
unchanged:
--- a/core/themes/bartik/css/components/form.css
+++ b/core/themes/bartik/css/components/form.css
@@ -180,7 +180,8 @@ input.form-submit:focus {
   border-color: #bbb;
   color: #717171;
 }
-.form-disabled label {
+.form-disabled label,
+.form-disabled .label {
   color: #717171;
 }
 
only in patch2:
unchanged:
--- a/core/themes/seven/css/components/form.css
+++ b/core/themes/seven/css/components/form.css
@@ -52,7 +52,8 @@ label[for] {
 .form-item label.option input {
   vertical-align: middle;
 }
-.form-disabled label {
+.form-disabled label,
+.form-disabled .label {
   color: #737373;
 }
 .form-disabled input.form-text,
@@ -63,6 +64,8 @@ label[for] {
 .form-disabled input.form-number,
 .form-disabled input.form-color,
 .form-disabled input.form-file,
+.form-disabled input.form-date,
+.form-disabled input.form-time,
 .form-disabled textarea.form-textarea,
 .form-disabled select.form-select {
   border-color: #d4d4d4;