diff --git a/core/modules/datetime/datetime.module b/core/modules/datetime/datetime.module
index 79905f8..c6dab16 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',
     ),
   );
@@ -307,10 +310,7 @@ function datetime_date_default_time($date) {
 }

 /**
- * Returns HTML for a HTML5-compatible #datetime form element.
- *
- * Wrapper around the date element type which creates a date and a time
- * component for a date.
+ * Prepares variables for #datetime form element templates.
  *
  * @param array $variables
  *   An associative array containing:
@@ -321,7 +321,7 @@ function datetime_date_default_time($date) {
  * @ingroup themeable
  * @see form_process_datetime()
  */
-function theme_datetime_form($variables) {
+function template_preprocess_datetime_form(&$variables) {

   $element = $variables['element'];

@@ -334,11 +334,12 @@ function theme_datetime_form($variables) {
   }
   $attributes['class'][] = 'container-inline';

-  return '<div' . new Attribute($attributes) . '>' . drupal_render_children($element) . '</div>';
+  $variables['content'] = drupal_render_children($element);
+  $variables['attributes'] = new Attribute($attributes);
 }

 /**
- * Returns HTML for a date selection form element.
+ * Prepares variables date selection form templates.
  *
  * @param array $variables
  *   An associative array containing:
@@ -348,7 +349,7 @@ function theme_datetime_form($variables) {
  *
  * @ingroup themeable
  */
-function theme_datelist_form($variables) {
+function template_preprocess_datelist_form(&$variables) {

   $element = $variables['element'];

@@ -361,27 +362,31 @@ function theme_datelist_form($variables) {
   }
   $attributes['class'][] = 'container-inline';

-  return '<div' . new Attribute($attributes) . '>' . drupal_render_children($element) . '</div>';
+  $variables['content'] = drupal_render_children($element);
+  $variables['attributes'] = new Attribute($attributes);
 }

 /**
- * Returns HTML for a datetime form element.
+ * Prepares variables for datetime form element templates.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - element: An associative array containing the properties of the element.
+ *     Properties used: #title, #children, #required, #attributes.
  *
  * @ingroup themeable
  */
-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)) : '';

   if (!empty($element['#title'])) {
-    $output .= '<h4 class="label">' . t('!title!required', array('!title' => $element['#title'], '!required' => $required)) . '</h4>';
+    $variables['title'] = t('!title!required', array('!title' => $element['#title'], '!required' => $required)) ;
   }
-  $output .= $element['#children'];

-  return $output;
+  $variables['content'] = $element['#children'];
 }

 /**
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..0bb64ed
--- /dev/null
+++ b/core/modules/datetime/templates/datelist-form.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Default implementation of a datelist form element.
+ *
+ * Available variables:
+ * - attributes: Remaining 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..ff321d5
--- /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: Remaining 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..1bfc05e
--- /dev/null
+++ b/core/modules/datetime/templates/datetime-wrapper.html.twig
@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Default theme implementation for 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: Remaining HTML attributes for the form wrapper.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_datetime_wrapper()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if (title) %}
+  <h4 class="label">
+    {{ title }}
+  </h4>
+{% endif %}
+<div{{ attributes}}>
+  {{ content }}
+</div>