diff --git a/core/lib/Drupal/Core/Datetime/DateFormatter.php b/core/lib/Drupal/Core/Datetime/DateFormatter.php
index 30fcc16..a20de8a 100644
--- a/core/lib/Drupal/Core/Datetime/DateFormatter.php
+++ b/core/lib/Drupal/Core/Datetime/DateFormatter.php
@@ -214,10 +214,9 @@ public function getSampleDateFormats($langcode = NULL, $timestamp = NULL, $timez
     $date_characters = 'dDjlNSwzWFmMntLoYyaABgGhHisueIOPTZcrU';
     $date_chars = str_split($date_characters);
     $date_elements = array_combine($date_chars, $date_chars);
-    array_walk($date_elements, function(&$character) use ($ts, $tz, $language_code) {
-      $character = $this->format($ts, 'custom', $character, $tz, $language_code);
-    });
-    return $date_elements;
+    return array_map(function($character) use ($ts, $tz, $language_code) {
+      return $this->format($ts, 'custom', $character, $tz, $language_code);
+    }, $date_elements);
   }
 
   /**
diff --git a/core/modules/config_translation/src/FormElement/DateFormat.php b/core/modules/config_translation/src/FormElement/DateFormat.php
index f833362..53f72ff 100644
--- a/core/modules/config_translation/src/FormElement/DateFormat.php
+++ b/core/modules/config_translation/src/FormElement/DateFormat.php
@@ -30,9 +30,9 @@ public function getTranslationElement(LanguageInterface $translation_language, $
     return array(
       '#type' => 'textfield',
       '#description' => $description,
-      '#field_suffix' => ' <div class="edit-date-format-suffix"><small id="edit-date-format-suffix">' . $format . '</small></div>',
+      '#field_suffix' => ' <small data-drupal-date-formatter="preview">' . $format . '</small>',
       '#attributes' => array(
-        'class' => array('date-formatter'),
+        'data-drupal-date-formatter' => 'source',
       ),
       '#attached' => array(
         'drupalSettings' => array('dateFormats' => $date_formatter->getSampleDateFormats($translation_language->getId())),
diff --git a/core/modules/system/js/system.date.js b/core/modules/system/js/system.date.js
index 6a73753..2266599 100644
--- a/core/modules/system/js/system.date.js
+++ b/core/modules/system/js/system.date.js
@@ -1,36 +1,23 @@
-(function ($) {
+(function ($, Drupal, drupalSettings) {
 
   "use strict";
 
+  var dateFormats = drupalSettings.dateFormats;
+
   /**
    * Display the preview for date format entered.
    */
   Drupal.behaviors.dateFormat = {
-    attach: function (context, settings) {
+    attach: function (context) {
       var $context = $(context);
-      var $source = $context.find('.date-formatter');
-      var $target = $context.find('#edit-date-format-suffix');
+      var $source = $context.find('[data-drupal-date-formatter="source"]').once('dateFormat');
+      var $target = $context.find('[data-drupal-date-formatter="preview"]').once('dateFormat');
+      var $preview = $target.find('em');
+
       // All elements have to exist.
       if (!$source.length || !$target.length) {
         return;
       }
-      var dateFormats = settings.dateFormats;
-      var eventData = {
-        $source: $source,
-        $target: $target
-      };
-
-      /**
-       * Callback to check if the given character has a date value.
-       *
-       * @param key
-       * @param value
-       *
-       * @returns {*}
-       */
-      function replaceCallback(key, value) {
-        return dateFormats[key] ? dateFormats[key] : value;
-      }
 
       /**
        * Event handler that replaces date characters with value.
@@ -38,29 +25,22 @@
        * @param e
        */
       function dateFormatHandler(e) {
-        var data = e.data;
-        var baseValue = $(e.target).val();
-        var dateString = baseValue.replace(/\\?(.?)/gi, replaceCallback);
-
-        if (dateString.length) {
-          $(data.$target).show();
-          if ($('em', $(data.$target)).length) {
-            $('em', $(data.$target)).html(dateString);
-          }
-        }
-        else {
-          $(data.$target).hide();
-        }
+        var baseValue = $(e.target).val() || '';
+        var dateString = baseValue.replace(/\\?(.?)/gi, function (key, value) {
+          return dateFormats[key] ? dateFormats[key] : value;
+        });
 
+        $preview.html(dateString);
+        $target.toggleClass('js-hide', !dateString.length);
       }
 
       /**
        * On given event triggers the date character replacement.
        */
-      $source.on('keyup.dateFormat change.dateFormat input.dateFormat', eventData, dateFormatHandler)
+      $source.on('formUpdated.formDate', dateFormatHandler)
         // Initialize preview.
-        .trigger('keyup');
+        .trigger('formUpdated');
     }
   };
 
-})(jQuery);
+})(jQuery, Drupal, drupalSettings);
diff --git a/core/modules/system/src/Form/DateFormatEditForm.php b/core/modules/system/src/Form/DateFormatEditForm.php
index f8e780f..511ad1a 100644
--- a/core/modules/system/src/Form/DateFormatEditForm.php
+++ b/core/modules/system/src/Form/DateFormatEditForm.php
@@ -21,7 +21,7 @@ public function form(array $form, FormStateInterface $form_state) {
     $form = parent::form($form, $form_state);
 
     $now = t('Displayed as %date', array('%date' => $this->dateFormatter->format(REQUEST_TIME, $this->entity->id())));
-    $form['date_format_pattern']['#field_suffix'] = ' <small id="edit-date-format-suffix">' . $now . '</small>';
+    $form['date_format_pattern']['#field_suffix'] = ' <small data-drupal-date-formatter="preview">' . $now . '</small>';
     $form['date_format_pattern']['#default_value'] = $this->entity->getPattern();
 
     return $form;
diff --git a/core/modules/system/src/Form/DateFormatFormBase.php b/core/modules/system/src/Form/DateFormatFormBase.php
index c2c86ab..19750b2 100644
--- a/core/modules/system/src/Form/DateFormatFormBase.php
+++ b/core/modules/system/src/Form/DateFormatFormBase.php
@@ -109,9 +109,9 @@ public function form(array $form, FormStateInterface $form_state) {
       '#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')),
       '#required' => TRUE,
       '#attributes' => array(
-        'class' => array('date-formatter'),
+        'data-drupal-date-formatter' => 'source',
       ),
-      '#field_suffix' => ' <small id="edit-date-format-suffix">Displayed as <em></em></small>',
+      '#field_suffix' => ' <small class="js-hide" data-drupal-date-formatter="preview">Displayed as <em></em></small>',
     );
 
     $form['langcode'] = array(
diff --git a/core/modules/system/system.libraries.yml b/core/modules/system/system.libraries.yml
index a1cf34e..b440e15 100644
--- a/core/modules/system/system.libraries.yml
+++ b/core/modules/system/system.libraries.yml
@@ -57,5 +57,7 @@ drupal.system.date:
     js/system.date.js: {}
   dependencies:
     - core/jquery
-    - core/jquery.once
     - core/drupal
+    - core/drupalSettings
+    - core/jquery.once
+    - core/drupal.form