diff --git a/core/modules/datetime/datetime.module b/core/modules/datetime/datetime.module
index b545c36..89ce482 100644
--- a/core/modules/datetime/datetime.module
+++ b/core/modules/datetime/datetime.module
@@ -68,12 +68,15 @@ function datetime_element_info() {
 function datetime_theme() {
   return array(
     'datetime_form' => array(
+      'template' => 'datetime-form',
       'render element' => 'element',
     ),
     'datelist_form' => array(
+      'template' => 'datelist-form',
       'render element' => 'element',
     ),
     'datetime_wrapper' => array(
+      'template' => 'datetime-wrapper',
       'render element' => 'element',
     ),
   );
@@ -305,10 +308,12 @@ function datetime_date_default_time($date) {
 }
 
 /**
- * Returns HTML for a HTML5-compatible #datetime form element.
+ * Prepares variables for datetime form element templates.
  *
- * Wrapper around the date element type which creates a date and a time
- * component for a date.
+ * The datetime form element serves as a wrapper around the date element type,
+ * which creates a date and a time component for a date.
+ *
+ * Default template: datetime-form.html.twig.
  *
  * @param array $variables
  *   An associative array containing:
@@ -316,74 +321,73 @@ function datetime_date_default_time($date) {
  *     Properties used: #title, #value, #options, #description, #required,
  *     #attributes.
  *
- * @ingroup themeable
  * @see form_process_datetime()
  */
-function theme_datetime_form($variables) {
-
+function template_preprocess_datetime_form(&$variables) {
   $element = $variables['element'];
 
-  $attributes = array();
   if (isset($element['#id'])) {
-    $attributes['id'] = $element['#id'];
+    $variables['attributes']['id'] = $element['#id'];
   }
   if (!empty($element['#attributes']['class'])) {
-    $attributes['class'] = (array) $element['#attributes']['class'];
+    $variables['attributes']['class'] = (array) $element['#attributes']['class'];
   }
-  $attributes['class'][] = 'container-inline';
+  $variables['attributes']['class'][] = 'container-inline';
 
-  return '<div' . new Attribute($attributes) . '>' . drupal_render_children($element) . '</div>';
+  $variables['content'] = $element;
 }
 
 /**
- * Returns HTML for a date selection form element.
+ * Prepares variables for date selection form templates.
+ *
+ * Default template: datelist-form.html.twig.
  *
  * @param array $variables
  *   An associative array containing:
  *   - element: An associative array containing the properties of the element.
  *     Properties used: #title, #value, #options, #description, #required,
  *     #attributes.
- *
- * @ingroup themeable
  */
-function theme_datelist_form($variables) {
-
+function template_preprocess_datelist_form(&$variables) {
   $element = $variables['element'];
 
-  $attributes = array();
   if (isset($element['#id'])) {
-    $attributes['id'] = $element['#id'];
+    $variables['attributes']['id'] = $element['#id'];
   }
   if (!empty($element['#attributes']['class'])) {
-    $attributes['class'] = (array) $element['#attributes']['class'];
+    $variables['attributes']['class'] = (array) $element['#attributes']['class'];
   }
-  $attributes['class'][] = 'container-inline';
+  $variables['attributes']['class'][] = 'container-inline';
 
-  return '<div' . new Attribute($attributes) . '>' . drupal_render_children($element) . '</div>';
+  $variables['content'] = $element;
 }
 
 /**
- * Returns HTML for a datetime form element.
+ * Prepares variables for datetime form wrapper templates.
  *
- * @ingroup themeable
+ * Default template: datetime-wrapper.html.twig.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - element: An associative array containing the properties of the element.
+ *     Properties used: #title, #children, #required, #attributes.
  */
-function theme_datetime_wrapper($variables) {
+function template_preprocess_datetime_wrapper(&$variables) {
   $element = $variables['element'];
-  $output = '';
 
   // If the element is required, a required marker is appended to the label.
   $required = !empty($element['#required']) ? theme('form_required_marker', array('element' => $element)) : '';
+  $variables['required'] = $required;
 
   if (!empty($element['#title'])) {
-    $output .= '<h4 class="label">' . t('!title!required', array('!title' => $element['#title'], '!required' => $required)) . '</h4>';
+    $variables['title'] = $element['#title'];
   }
-  $output .= $element['#children'];
 
-  return $output;
+  $variables['content'] = $element['#children'];
 }
 
 /**
- * Expands a #datetime element type into date and/or time elements.
+ * Expands a datetime element type into date and/or time elements.
  *
  * All form elements are designed to have sane defaults so any or all can be
  * omitted. Both the date and time components are configurable so they can be
diff --git a/core/modules/datetime/templates/datelist-form.html.twig b/core/modules/datetime/templates/datelist-form.html.twig
new file mode 100644
index 0000000..7e30eb0
--- /dev/null
+++ b/core/modules/datetime/templates/datelist-form.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a datelist form element.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the datelist form element.
+ * - content: The datelist form element to be output.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_datelist_form()
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes }}>
+  {{ content }}
+</div>
diff --git a/core/modules/datetime/templates/datetime-form.html.twig b/core/modules/datetime/templates/datetime-form.html.twig
new file mode 100644
index 0000000..6a66c4c
--- /dev/null
+++ b/core/modules/datetime/templates/datetime-form.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a datetime form element.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the datetime form element.
+ * - content: The datelist form element to be output.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_datetime_form()
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes }}>
+  {{ content }}
+</div>
diff --git a/core/modules/datetime/templates/datetime-wrapper.html.twig b/core/modules/datetime/templates/datetime-wrapper.html.twig
new file mode 100644
index 0000000..cff3717
--- /dev/null
+++ b/core/modules/datetime/templates/datetime-wrapper.html.twig
@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a datetime form wrapper.
+ *
+ * Available variables:
+ * - content: The form element to be output, usually a datelist, or datetime.
+ * - title: The title of the form element.
+ * - attributes: HTML attributes for the form wrapper.
+ * - required: (optional) A marker indicating that the form element is required.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_datetime_wrapper()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if title %}
+  <h4 class="label">
+    {{ '!title!required'|t({ '!title': title, '!required': required }) }}
+  </h4>
+{% endif %}
+{{ content }}
+