diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index a6d963c..94721c9 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -292,6 +292,15 @@ drupal.timezone:
     - core/jquery.once
     - core/drupal
 
+drupal.dateformat:
+  version: VERSION
+  js:
+    misc/dateformat.js: {}
+  dependencies:
+    - core/jquery
+    - core/jquery.once
+    - core/drupal
+
 drupal.vertical-tabs:
   version: VERSION
   js:
diff --git a/core/misc/dateformat.js b/core/misc/dateformat.js
new file mode 100644
index 0000000..a0a7f52
--- /dev/null
+++ b/core/misc/dateformat.js
@@ -0,0 +1,43 @@
+(function ($) {
+
+  "use strict";
+
+  /**
+   * Display the sample date for the format entered.
+   */
+  Drupal.behaviors.dateFormat = {
+    attach: function (context, settings) {
+      var $context = $(context);
+
+      var $source = $context.find('.date-formatter');
+      var $target = $context.find('#edit-date-format-suffix');
+        // All elements have to exist.
+        if (!$source.length || !$target.length) {
+          return;
+        }
+        // Skip processing upon a form validation error on the machine name.
+        if ($source.hasClass('error')) {
+          return;
+        }
+      var $formats = settings.dateFormats;
+      var replaceCallback = function (key, value) {
+          return $formats[key] ? $formats[key] : value;
+        };
+      var eventData = {
+        $source: $source,
+        $target: $target
+      };
+
+      $source.on('keyup.dateFormat change.dateFormat input.dateFormat', eventData, dateFormatHandler)
+        // Initialize preview.
+        .trigger('keyup');
+      function dateFormatHandler(e) {
+        var data = e.data;
+        var baseValue = $(e.target).val();
+        var dateString = baseValue.replace(/\\?(.?)/gi, replaceCallback)
+        $(data.$target).html(dateString);
+      }
+    }
+  };
+
+})(jQuery);
diff --git a/core/modules/system/src/Form/DateFormatFormBase.php b/core/modules/system/src/Form/DateFormatFormBase.php
index c843ba2..3826d40 100644
--- a/core/modules/system/src/Form/DateFormatFormBase.php
+++ b/core/modules/system/src/Form/DateFormatFormBase.php
@@ -80,30 +80,6 @@ public function exists($entity_id, array $element) {
   }
 
   /**
-   * Returns the date for a given format string.
-   *
-   * @param array $form
-   *   An associative array containing the structure of the form.
-   * @param \Drupal\Core\Form\FormStateInterface $form_state
-   *   The current state of the form.
-   *
-   * @return \Drupal\Core\Ajax\AjaxResponse
-   *   An AJAX Response to update the date-time value of the date format.
-   */
-  public static function dateTimeLookup(array $form, FormStateInterface $form_state) {
-    $format = '';
-    if (!$form_state->isValueEmpty('date_format_pattern')) {
-      $format = t('Displayed as %date_format', array('%date_format' => \Drupal::service('date.formatter')->format(REQUEST_TIME, 'custom', $form_state->getValue('date_format_pattern'))));
-    }
-    // Return a command instead of a string, since the Ajax framework
-    // automatically prepends an additional empty DIV element for a string, which
-    // breaks the layout.
-    $response = new AjaxResponse();
-    $response->addCommand(new ReplaceCommand('#edit-date-format-suffix', '<small id="edit-date-format-suffix">' . $format . '</small>'));
-    return $response;
-  }
-
-  /**
    * {@inheritdoc}
    */
   public function form(array $form, FormStateInterface $form_state) {
@@ -133,13 +109,9 @@ public function form(array $form, FormStateInterface $form_state) {
       '#maxlength' => 100,
       '#description' => $this->t('A user-defined date format. See the <a href="@url">PHP manual</a> for available options.', array('@url' => 'http://php.net/manual/function.date.php')),
       '#default_value' => '',
-      '#field_suffix' => ' <small id="edit-date-format-suffix"></small>',
-      '#ajax' => array(
-        'callback' => '::dateTimeLookup',
-        'event' => 'keyup',
-        'progress' => array('type' => 'throbber', 'message' => NULL),
-      ),
       '#required' => TRUE,
+      '#attributes' => array('class' => array('date-formatter')),
+      '#field_suffix' => '<small id="edit-date-format-suffix"></small>'
     );
 
     $form['langcode'] = array(
@@ -148,7 +120,8 @@ public function form(array $form, FormStateInterface $form_state) {
       '#languages' => LanguageInterface::STATE_ALL,
       '#default_value' => $this->entity->language()->getId(),
     );
-
+    $form['#attached']['drupalSettings']['dateFormats'] = $this->getSampleDateFormats();
+    $form['#attached']['library'][] = 'core/drupal.dateformat';
     return parent::form($form, $form_state);
   }
 
@@ -192,4 +165,51 @@ public function save(array $form, FormStateInterface $form_state) {
     $form_state->setRedirectUrl($this->entity->urlInfo('collection'));
   }
 
+  protected function getSampleDateFormats() {
+     $date_chars = array(
+       'd',
+       'D',
+       'j',
+       'l',
+       'N',
+       'S',
+       'w',
+       'z',
+       'W',
+       'F',
+       'm',
+       'M',
+       'n',
+       't',
+       'L',
+       'o',
+       'Y',
+       'y',
+       'a',
+       'A',
+       'B',
+       'g',
+       'G',
+       'h',
+       'H',
+       'i',
+       's',
+       'u',
+       'e',
+       'I',
+       'O',
+       'P',
+       'T',
+       'Z',
+       'c',
+       'r',
+       'U',
+       );
+    $date_parts = array_combine($date_chars, $date_chars);
+    array_walk($date_parts, function(&$char) {
+      $char = date($char);
+    });
+    return $date_parts;
+  }
+
 }