diff --git a/core/modules/datetime/src/Plugin/Field/FieldFormatter/DateTimeCustomFormatter.php b/core/modules/datetime/src/Plugin/Field/FieldFormatter/DateTimeCustomFormatter.php
index 96df6c5..af70cae 100644
--- a/core/modules/datetime/src/Plugin/Field/FieldFormatter/DateTimeCustomFormatter.php
+++ b/core/modules/datetime/src/Plugin/Field/FieldFormatter/DateTimeCustomFormatter.php
@@ -31,6 +31,25 @@ public static function defaultSettings() {
   /**
    * {@inheritdoc}
    */
+  public function viewElements(FieldItemListInterface $items, $langcode) {
+    // @todo Remove this method in https://www.drupal.org/node/2793143.
+    $elements = array();
+
+    foreach ($items as $delta => $item) {
+      if (!empty($item->date)) {
+        /** @var \Drupal\Core\Datetime\DrupalDateTime $date */
+        $date = $item->date;
+
+        $elements[$delta] = $this->buildDate($date);
+      }
+    }
+
+    return $elements;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
   protected function formatDate($date) {
     $format = $this->getSetting('date_format');
     $timezone = $this->getSetting('timezone_override');
diff --git a/core/modules/datetime/src/Plugin/Field/FieldFormatter/DateTimeFormatterBase.php b/core/modules/datetime/src/Plugin/Field/FieldFormatter/DateTimeFormatterBase.php
index 1468e51..6a0b01c 100644
--- a/core/modules/datetime/src/Plugin/Field/FieldFormatter/DateTimeFormatterBase.php
+++ b/core/modules/datetime/src/Plugin/Field/FieldFormatter/DateTimeFormatterBase.php
@@ -125,50 +125,21 @@ public function viewElements(FieldItemListInterface $items, $langcode) {
     $elements = array();
 
     foreach ($items as $delta => $item) {
-      $output = '';
-      $iso_date = '';
-
       if ($item->date) {
         /** @var \Drupal\Core\Datetime\DrupalDateTime $date */
         $date = $item->date;
+        $elements[$delta] = $this->buildDateWithIsoAttribute($date);
 
-        if ($this->getFieldSetting('datetime_type') == 'date') {
-          // A date without time will pick up the current time, use the default.
-          datetime_date_default_time($date);
+        if (!empty($item->_attributes)) {
+          $elements[$delta]['#attributes'] += $item->_attributes;
+          // Unset field item attributes since they have been included in the
+          // formatter output and should not be rendered in the field template.
+          unset($item->_attributes);
         }
-
-        // Create the ISO date in Universal Time.
-        $iso_date = $date->format("Y-m-d\TH:i:s") . 'Z';
-
-        $this->setTimeZone($date);
-
-        $output = $this->formatDate($date);
-      }
-
-      // Display the date using theme datetime.
-      $elements[$delta] = array(
-        '#cache' => [
-          'contexts' => [
-            'timezone',
-          ],
-        ],
-        '#theme' => 'time',
-        '#text' => $output,
-        '#html' => FALSE,
-        '#attributes' => array(
-          'datetime' => $iso_date,
-        ),
-      );
-      if (!empty($item->_attributes)) {
-        $elements[$delta]['#attributes'] += $item->_attributes;
-        // Unset field item attributes since they have been included in the
-        // formatter output and should not be rendered in the field template.
-        unset($item->_attributes);
       }
     }
 
     return $elements;
-
   }
 
   /**
@@ -221,4 +192,69 @@ protected function getFormatSettings() {
     return $settings;
   }
 
+  /**
+   * Creates a render array from a date object.
+   *
+   * @param \Drupal\Core\Datetime\DrupalDateTime $date
+   *   A date object.
+   *
+   * @return array
+   *   A render array.
+   */
+  protected function buildDate(DrupalDateTime $date) {
+    if ($this->getFieldSetting('datetime_type') == DateTimeItem::DATETIME_TYPE_DATE) {
+      // A date without time will pick up the current time, use the default.
+      datetime_date_default_time($date);
+    }
+    $this->setTimeZone($date);
+
+    $build = [
+      '#plain_text' => $this->formatDate($date),
+      '#cache' => [
+        'contexts' => [
+          'timezone',
+        ],
+      ],
+    ];
+
+    return $build;
+  }
+
+  /**
+   * Creates a render array from a date object with ISO date attribute.
+   *
+   * @param \Drupal\Core\Datetime\DrupalDateTime $date
+   *   A date object.
+   *
+   * @return array
+   *   A render array.
+   */
+  protected function buildDateWithIsoAttribute(DrupalDateTime $date) {
+    if ($this->getFieldSetting('datetime_type') == DateTimeItem::DATETIME_TYPE_DATE) {
+      // A date without time will pick up the current time, use the default.
+      datetime_date_default_time($date);
+    }
+
+    // Create the ISO date in Universal Time.
+    $iso_date = $date->format("Y-m-d\TH:i:s") . 'Z';
+
+    $this->setTimeZone($date);
+
+    $build = [
+      '#theme' => 'time',
+      '#text' => $this->formatDate($date),
+      '#html' => FALSE,
+      '#attributes' => [
+        'datetime' => $iso_date,
+      ],
+      '#cache' => [
+        'contexts' => [
+          'timezone',
+        ],
+      ],
+    ];
+
+    return $build;
+  }
+
 }
diff --git a/core/modules/datetime/src/Plugin/Field/FieldFormatter/DateTimePlainFormatter.php b/core/modules/datetime/src/Plugin/Field/FieldFormatter/DateTimePlainFormatter.php
index a73df4c..5bb6766 100644
--- a/core/modules/datetime/src/Plugin/Field/FieldFormatter/DateTimePlainFormatter.php
+++ b/core/modules/datetime/src/Plugin/Field/FieldFormatter/DateTimePlainFormatter.php
@@ -21,6 +21,24 @@ class DateTimePlainFormatter extends DateTimeFormatterBase {
   /**
    * {@inheritdoc}
    */
+  public function viewElements(FieldItemListInterface $items, $langcode) {
+    $elements = array();
+
+    foreach ($items as $delta => $item) {
+      if (!empty($item->date)) {
+        /** @var \Drupal\Core\Datetime\DrupalDateTime $date */
+        $date = $item->date;
+
+        $elements[$delta] = $this->buildDate($date);
+      }
+    }
+
+    return $elements;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
   protected function formatDate($date) {
     $format = $this->getFieldSetting('datetime_type') == DateTimeItem::DATETIME_TYPE_DATE ? DATETIME_DATE_STORAGE_FORMAT : DATETIME_DATETIME_STORAGE_FORMAT;
     $timezone = $this->getSetting('timezone_override');
diff --git a/core/modules/datetime_range/src/DateTimeRangeTrait.php b/core/modules/datetime_range/src/DateTimeRangeTrait.php
index 2147da6..8b52242 100644
--- a/core/modules/datetime_range/src/DateTimeRangeTrait.php
+++ b/core/modules/datetime_range/src/DateTimeRangeTrait.php
@@ -12,71 +12,6 @@
 trait DateTimeRangeTrait {
 
   /**
-   * Creates a render array from a date object.
-   *
-   * @param \Drupal\Core\Datetime\DrupalDateTime $date
-   *   A date object.
-   *
-   * @return array
-   *   A render array.
-   */
-  protected function buildDate(DrupalDateTime $date) {
-    if ($this->getFieldSetting('datetime_type') == DateTimeItem::DATETIME_TYPE_DATE) {
-      // A date without time will pick up the current time, use the default.
-      datetime_date_default_time($date);
-    }
-    $this->setTimeZone($date);
-
-    $build = [
-      '#plain_text' => $this->formatDate($date),
-      '#cache' => [
-        'contexts' => [
-          'timezone',
-        ],
-      ],
-    ];
-
-    return $build;
-  }
-
-  /**
-   * Creates a render array from a date object with ISO date attribute.
-   *
-   * @param \Drupal\Core\Datetime\DrupalDateTime $date
-   *   A date object.
-   *
-   * @return array
-   *   A render array.
-   */
-  protected function buildDateWithIsoAttribute(DrupalDateTime $date) {
-    if ($this->getFieldSetting('datetime_type') == DateTimeItem::DATETIME_TYPE_DATE) {
-      // A date without time will pick up the current time, use the default.
-      datetime_date_default_time($date);
-    }
-
-    // Create the ISO date in Universal Time.
-    $iso_date = $date->format("Y-m-d\TH:i:s") . 'Z';
-
-    $this->setTimeZone($date);
-
-    $build = [
-      '#theme' => 'time',
-      '#text' => $this->formatDate($date),
-      '#html' => FALSE,
-      '#attributes' => [
-        'datetime' => $iso_date,
-      ],
-      '#cache' => [
-        'contexts' => [
-          'timezone',
-        ],
-      ],
-    ];
-
-    return $build;
-  }
-
-  /**
    * {@inheritdoc}
    */
   public function viewElements(FieldItemListInterface $items, $langcode) {
diff --git a/core/modules/datetime_range/src/Plugin/Field/FieldFormatter/DateRangeCustomFormatter.php b/core/modules/datetime_range/src/Plugin/Field/FieldFormatter/DateRangeCustomFormatter.php
index 8154dee..d511ba4 100644
--- a/core/modules/datetime_range/src/Plugin/Field/FieldFormatter/DateRangeCustomFormatter.php
+++ b/core/modules/datetime_range/src/Plugin/Field/FieldFormatter/DateRangeCustomFormatter.php
@@ -37,6 +37,37 @@ public static function defaultSettings() {
   /**
    * {@inheritdoc}
    */
+  public function viewElements(FieldItemListInterface $items, $langcode) {
+    // @todo Remove this method in https://www.drupal.org/node/2793143.
+    $elements = [];
+    $separator = $this->getSetting('separator');
+
+    foreach ($items as $delta => $item) {
+      if (!empty($item->start_date) && !empty($item->end_date)) {
+        /** @var \Drupal\Core\Datetime\DrupalDateTime $start_date */
+        $start_date = $item->start_date;
+        /** @var \Drupal\Core\Datetime\DrupalDateTime $end_date */
+        $end_date = $item->end_date;
+
+        if ($start_date->format('U') !== $end_date->format('U')) {
+          $elements[$delta] = [
+            'start_date' => $this->buildDate($start_date),
+            'separator' => ['#plain_text' => ' ' . $separator . ' '],
+            'end_date' => $this->buildDate($end_date),
+          ];
+        }
+        else {
+          $elements[$delta] = $this->buildDate($start_date);
+        }
+      }
+    }
+
+    return $elements;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
   public function settingsForm(array $form, FormStateInterface $form_state) {
     $form = parent::settingsForm($form, $form_state);
 
diff --git a/core/modules/datetime_range/src/Plugin/Field/FieldFormatter/DateRangePlainFormatter.php b/core/modules/datetime_range/src/Plugin/Field/FieldFormatter/DateRangePlainFormatter.php
index 287f451..4842e1f 100644
--- a/core/modules/datetime_range/src/Plugin/Field/FieldFormatter/DateRangePlainFormatter.php
+++ b/core/modules/datetime_range/src/Plugin/Field/FieldFormatter/DateRangePlainFormatter.php
@@ -37,6 +37,36 @@ public static function defaultSettings() {
   /**
    * {@inheritdoc}
    */
+  public function viewElements(FieldItemListInterface $items, $langcode) {
+    $elements = [];
+    $separator = $this->getSetting('separator');
+
+    foreach ($items as $delta => $item) {
+      if (!empty($item->start_date) && !empty($item->end_date)) {
+        /** @var \Drupal\Core\Datetime\DrupalDateTime $start_date */
+        $start_date = $item->start_date;
+        /** @var \Drupal\Core\Datetime\DrupalDateTime $end_date */
+        $end_date = $item->end_date;
+
+        if ($start_date->format('U') !== $end_date->format('U')) {
+          $elements[$delta] = [
+            'start_date' => $this->buildDate($start_date),
+            'separator' => ['#plain_text' => ' ' . $separator . ' '],
+            'end_date' => $this->buildDate($end_date),
+          ];
+        }
+        else {
+          $elements[$delta] = $this->buildDate($start_date);
+        }
+      }
+    }
+
+    return $elements;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
   public function settingsForm(array $form, FormStateInterface $form_state) {
     $form = parent::settingsForm($form, $form_state);