diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 7761897..bf4dcf5 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1271,8 +1271,8 @@ function template_preprocess_html(&$variables) {
   // Construct page title.
   if (!empty($variables['page']['#title'])) {
     $head_title = array(
-      'title' => SafeMarkup::set(trim(strip_tags($variables['page']['#title']))),
-      'name' => String::checkPlain($site_config->get('name')),
+      'title' => SafeMarkup::checkAdminXss(trim(strip_tags($variables['page']['#title']))),
+      'name' => $site_config->get('name'),
     );
   }
   // @todo Remove once views is not bypassing the view subscriber anymore.
@@ -1280,24 +1280,23 @@ function template_preprocess_html(&$variables) {
   elseif ($is_front_page) {
     $head_title = array(
       'title' => t('Home'),
-      'name' => String::checkPlain($site_config->get('name')),
+      'name' => $site_config->get('name'),
     );
   }
   else {
-    $head_title = array('name' => String::checkPlain($site_config->get('name')));
+    $head_title = ['name' => $site_config->get('name')];
     if ($site_config->get('slogan')) {
       $head_title['slogan'] = strip_tags(Xss::filterAdmin($site_config->get('slogan')));
     }
   }
 
   $variables['head_title_array'] = $head_title;
-  $output = '';
-  $separator = '';
-  foreach ($head_title as $item) {
-    $output .= $separator . SafeMarkup::escape($item);
-    $separator = ' | ';
-  }
-  $variables['head_title'] = SafeMarkup::set($output);
+
+  $variables['head_title'] = [
+    '#type' => 'inline_template',
+    '#template' => '{{ head_title|safe_join(" | ") }}',
+    '#context' => ['head_title' => $head_title],
+  ];
 
   // Collect all attachments. This must happen in the preprocess function for
   // #type => html, to ensure that attachments added in #pre_render callbacks
diff --git a/core/lib/Drupal/Core/Datetime/DateFormatter.php b/core/lib/Drupal/Core/Datetime/DateFormatter.php
index 0b4f817..35987b7 100644
--- a/core/lib/Drupal/Core/Datetime/DateFormatter.php
+++ b/core/lib/Drupal/Core/Datetime/DateFormatter.php
@@ -193,6 +193,34 @@ public function formatInterval($interval, $granularity = 2, $langcode = NULL) {
   }
 
   /**
+   * Provides values for all date formatting characters for a given timestamp.
+   *
+   * @param string|null $langcode
+   *   (optional) Language code of the date format, if different from the site
+   *   default language.
+   * @param int|null $timestamp
+   *   (optional) The Unix timestamp to format. REQUEST_TIME is used by default.
+   * @param string|null $timezone
+   *   (optional) The timezone to use, if different from the site's default
+   *   timezone.
+   *
+   * @return array
+   *   An array of formatted date values, indexed by the date format character.
+   *
+   * @see date()
+   */
+  public function getSampleDateFormats($langcode = NULL, $timestamp = NULL, $timezone = NULL) {
+    $timestamp = $timestamp ?: REQUEST_TIME;
+    // All date format characters for the PHP date() function.
+    $date_characters = 'dDjlNSwzWFmMntLoYyaABgGhHisueIOPTZcrU';
+    $date_chars = str_split($date_characters);
+    $date_elements = array_combine($date_chars, $date_chars);
+    return array_map(function($character) use ($timestamp, $timezone, $langcode) {
+      return $this->format($timestamp, 'custom', $character, $timezone, $langcode);
+    }, $date_elements);
+  }
+
+  /**
    * Loads the given format pattern for the given langcode.
    *
    * @param string $format
@@ -204,6 +232,9 @@ public function formatInterval($interval, $granularity = 2, $langcode = NULL) {
    *   The pattern for the date format in the given language.
    */
   protected function dateFormat($format, $langcode) {
+    if ($format == 'custom') {
+      return NULL;
+    }
     if (!isset($this->dateFormats[$format][$langcode])) {
       $original_language = $this->languageManager->getConfigOverrideLanguage();
       $this->languageManager->setConfigOverrideLanguage(new Language(array('id' => $langcode)));
@@ -226,4 +257,13 @@ protected function country() {
     return $this->country;
   }
 
+  /**
+   * Setter for country.
+   *
+   * @param $country_code
+   */
+  public function setCountry($country_code) {
+    $this->country = $country_code;
+  }
+
 }
diff --git a/core/lib/Drupal/Core/Datetime/DrupalDateTime.php b/core/lib/Drupal/Core/Datetime/DrupalDateTime.php
index ac22dab..6d9e88b 100644
--- a/core/lib/Drupal/Core/Datetime/DrupalDateTime.php
+++ b/core/lib/Drupal/Core/Datetime/DrupalDateTime.php
@@ -62,9 +62,9 @@ public function __construct($time = 'now', $timezone = NULL, $settings = array()
    * knowledge of the preferred user timezone.
    */
   protected function prepareTimezone($timezone) {
-    $user_timezone = drupal_get_user_timezone();
-    if (empty($timezone) && !empty($user_timezone)) {
-      $timezone = $user_timezone;
+    if (empty($timezone)) {
+      // Fallback to user or system default timezone.
+      $timezone = drupal_get_user_timezone();
     }
     return parent::prepareTimezone($timezone);
   }
@@ -109,4 +109,5 @@ public function format($format, $settings = array()) {
     }
     return $value;
   }
+
 }
diff --git a/core/modules/config_translation/src/Form/ConfigTranslationFormBase.php b/core/modules/config_translation/src/Form/ConfigTranslationFormBase.php
index 2831fd9..5bdbfc8 100644
--- a/core/modules/config_translation/src/Form/ConfigTranslationFormBase.php
+++ b/core/modules/config_translation/src/Form/ConfigTranslationFormBase.php
@@ -176,6 +176,9 @@ public function buildForm(array $form, FormStateInterface $form_state, Request $
       if ($form_element = $this->createFormElement($schema)) {
         $parents = array('config_names', $name);
         $form['config_names'][$name] += $form_element->getTranslationBuild($this->sourceLanguage, $this->language, $source_config, $translation_config, $parents);
+        if ($attributes = $form_element->getFormAttributes()) {
+          $form = array_merge_recursive($form, $attributes);
+        }
       }
     }
 
diff --git a/core/modules/config_translation/src/FormElement/DateFormat.php b/core/modules/config_translation/src/FormElement/DateFormat.php
index 729afee..45aab74 100644
--- a/core/modules/config_translation/src/FormElement/DateFormat.php
+++ b/core/modules/config_translation/src/FormElement/DateFormat.php
@@ -22,51 +22,29 @@ class DateFormat extends FormElementBase {
    * {@inheritdoc}
    */
   public function getTranslationElement(LanguageInterface $translation_language, $source_config, $translation_config) {
+    /** @var \Drupal\Core\Datetime\DateFormatter $date_formatter */
+    $date_formatter = \Drupal::service('date.formatter');
     $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'));
-    $format = $this->t('Displayed as %date_format', array('%date_format' => \Drupal::service('date.formatter')->format(REQUEST_TIME, 'custom', $translation_config)));
+    $format = $this->t('Displayed as %date_format', array('%date_format' => $date_formatter->format(REQUEST_TIME, 'custom', $translation_config)));
 
-    return array(
+    return [
       '#type' => 'textfield',
       '#description' => $description,
-      '#field_suffix' => ' <div class="edit-date-format-suffix"><small id="edit-date-format-suffix">' . $format . '</small></div>',
-      '#ajax' => array(
-        'callback' => 'Drupal\config_translation\FormElement\DateFormat::ajaxSample',
-        'event' => 'keyup',
-        'progress' => array('type' => 'throbber', 'message' => NULL),
-      ),
-    ) + parent::getTranslationElement($translation_language, $source_config, $translation_config);
+      '#field_suffix' => ' <small data-drupal-date-formatter="preview">' . $format . '</small>',
+      '#attributes' => [
+        'data-drupal-date-formatter' => 'source',
+      ],
+      '#attached' => [
+        'drupalSettings' => array('dateFormats' => $date_formatter->getSampleDateFormats($translation_language->getId())),
+      ],
+    ] + parent::getTranslationElement($translation_language, $source_config, $translation_config);
   }
 
   /**
-   * Ajax callback to render a sample of the input date format.
-   *
-   * @param array $form
-   *   Form API array structure.
-   * @param \Drupal\Core\Form\FormStateInterface $form_state
-   *   Form state information.
-   *
-   * @return AjaxResponse
-   *   Ajax response with the rendered sample date using the given format. If
-   *   the given format cannot be identified or was empty, the response will
-   *   be empty as well.
+   * {@inheritdoc}
    */
-  public static function ajaxSample(array $form, FormStateInterface $form_state) {
-    $response = new AjaxResponse();
-
-    $format_value = NestedArray::getValue($form_state->getValues(), $form_state->getTriggeringElement()['#array_parents']);
-    if (!empty($format_value)) {
-      // Format the date with a custom date format with the given pattern.
-      // The object is not instantiated in an Ajax context, so $this->t()
-      // cannot be used here.
-      $format = t('Displayed as %date_format', array('%date_format' => \Drupal::service('date.formatter')->format(REQUEST_TIME, 'custom', $format_value)));
-
-      // 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->addCommand(new ReplaceCommand('#edit-date-format-suffix', '<small id="edit-date-format-suffix">' . $format . '</small>'));
-    }
-
-    return $response;
+  public function getFormAttributes() {
+    return ['#attached' => ['library' => ['system/drupal.system.date']]];
   }
 
 }
diff --git a/core/modules/config_translation/src/FormElement/ElementInterface.php b/core/modules/config_translation/src/FormElement/ElementInterface.php
index 286eeba..e58ce86 100644
--- a/core/modules/config_translation/src/FormElement/ElementInterface.php
+++ b/core/modules/config_translation/src/FormElement/ElementInterface.php
@@ -70,4 +70,12 @@ public function getTranslationBuild(LanguageInterface $source_language, Language
    */
   public function setConfig(Config $base_config, LanguageConfigOverride $config_translation, $config_values, $base_key = NULL);
 
+  /**
+   * Allows providing form attributes for the configuration form.
+   *
+   * @return array
+   *   An array of form attributes.
+   */
+  public function getFormAttributes();
+
 }
diff --git a/core/modules/config_translation/src/FormElement/FormElementBase.php b/core/modules/config_translation/src/FormElement/FormElementBase.php
index 7db01e1..53cf5ff 100644
--- a/core/modules/config_translation/src/FormElement/FormElementBase.php
+++ b/core/modules/config_translation/src/FormElement/FormElementBase.php
@@ -75,6 +75,13 @@ public function getTranslationBuild(LanguageInterface $source_language, Language
   }
 
   /**
+   * {@inheritdoc}
+   */
+  public function getFormAttributes() {
+    return array();
+  }
+
+  /**
    * Returns the source element for a given configuration definition.
    *
    * This can be either a render array that actually outputs the source values
diff --git a/core/modules/config_translation/src/FormElement/ListElement.php b/core/modules/config_translation/src/FormElement/ListElement.php
index 9365fc2..3a0c138 100644
--- a/core/modules/config_translation/src/FormElement/ListElement.php
+++ b/core/modules/config_translation/src/FormElement/ListElement.php
@@ -97,6 +97,23 @@ public function setConfig(Config $base_config, LanguageConfigOverride $config_tr
   }
 
   /**
+   * {@inheritdoc}
+   */
+  public function getFormAttributes() {
+    $attributes = array();
+    foreach ($this->element as $key => $element) {
+      if ($form_element = ConfigTranslationFormBase::createFormElement($element)) {
+        $form_attributes = $form_element->getFormAttributes();
+        if (empty($form_attributes)) {
+          continue;
+        }
+        $attributes += $form_attributes;
+      }
+    }
+    return $attributes;
+  }
+
+  /**
    * Returns the title for the 'details' element of a group of schema elements.
    *
    * For some configuration elements the same element structure can be repeated
diff --git a/core/modules/system/js/system.date.js b/core/modules/system/js/system.date.js
new file mode 100644
index 0000000..fcab3ef
--- /dev/null
+++ b/core/modules/system/js/system.date.js
@@ -0,0 +1,46 @@
+(function ($, Drupal, drupalSettings) {
+
+  "use strict";
+
+  var dateFormats = drupalSettings.dateFormats;
+
+  /**
+   * Display the preview for date format entered.
+   */
+  Drupal.behaviors.dateFormat = {
+    attach: function (context) {
+      var $context = $(context);
+      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;
+      }
+
+      /**
+       * Event handler that replaces date characters with value.
+       *
+       * @param {object} e
+       */
+      function dateFormatHandler(e) {
+        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', dateFormatHandler)
+        // Initialize preview.
+        .trigger('keyup');
+    }
+  };
+
+})(jQuery, Drupal, drupalSettings);
diff --git a/core/modules/system/system.js b/core/modules/system/js/system.js
similarity index 100%
rename from core/modules/system/system.js
rename to core/modules/system/js/system.js
diff --git a/core/modules/system/system.modules.js b/core/modules/system/js/system.modules.js
similarity index 100%
rename from core/modules/system/system.modules.js
rename to core/modules/system/js/system.modules.js
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 c843ba2..69f1d95 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) {
@@ -126,20 +102,16 @@ public function form(array $form, FormStateInterface $form_state) {
         'error' => $this->t('The machine-readable name must be unique, and can only contain lowercase letters, numbers, and underscores. Additionally, it can not be the reserved word "custom".'),
       ),
     );
-
     $form['date_format_pattern'] = array(
       '#type' => 'textfield',
       '#title' => t('Format string'),
       '#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(
+        'data-drupal-date-formatter' => 'source',
+      ),
+      '#field_suffix' => ' <small class="js-hide" data-drupal-date-formatter="preview">' . $this->t('Displayed as %date_format', array('%date_format' => '')) . '</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->dateFormatter->getSampleDateFormats();
+    $form['#attached']['library'][] = 'system/drupal.system.date';
     return parent::form($form, $form_state);
   }
 
diff --git a/core/modules/system/system.libraries.yml b/core/modules/system/system.libraries.yml
index 34c90dd..b440e15 100644
--- a/core/modules/system/system.libraries.yml
+++ b/core/modules/system/system.libraries.yml
@@ -29,7 +29,7 @@ maintenance:
 drupal.system:
   version: VERSION
   js:
-    system.js: {}
+    js/system.js: {}
   dependencies:
     - core/jquery
     - core/drupal
@@ -39,7 +39,7 @@ drupal.system:
 drupal.system.modules:
   version: VERSION
   js:
-    system.modules.js: {}
+    js/system.modules.js: {}
   dependencies:
     - core/jquery
     - core/drupal
@@ -50,3 +50,14 @@ diff:
   css:
     component:
       css/system.diff.css: {}
+
+drupal.system.date:
+  version: VERSION
+  js:
+    js/system.date.js: {}
+  dependencies:
+    - core/jquery
+    - core/drupal
+    - core/drupalSettings
+    - core/jquery.once
+    - core/drupal.form
diff --git a/core/tests/Drupal/Tests/Core/Datetime/DateTest.php b/core/tests/Drupal/Tests/Core/Datetime/DateTest.php
index da9ebaa..c9acfad 100644
--- a/core/tests/Drupal/Tests/Core/Datetime/DateTest.php
+++ b/core/tests/Drupal/Tests/Core/Datetime/DateTest.php
@@ -5,9 +5,10 @@
  * Contains \Drupal\Tests\Core\Datetime\DateTest.
  */
 
-namespace Drupal\Tests\Core\Datetime;
+namespace Drupal\Tests\Core\Datetime {
 
 use Drupal\Core\Datetime\DateFormatter;
+use Drupal\Core\DependencyInjection\ContainerBuilder;
 use Drupal\Tests\UnitTestCase;
 
 /**
@@ -45,6 +46,7 @@ class DateTest extends UnitTestCase {
   protected $dateFormatter;
 
   protected function setUp() {
+    parent::setUp();
     $this->entityManager = $this->getMock('Drupal\Core\Entity\EntityManagerInterface');
     $this->languageManager = $this->getMock('Drupal\Core\Language\LanguageManagerInterface');
     $this->stringTranslation = $this->getMock('Drupal\Core\StringTranslation\TranslationInterface');
@@ -128,4 +130,37 @@ public function testFormatIntervalZeroSecond() {
     $this->assertEquals('0 sec', $result);
   }
 
+  /**
+   * Tests the getSampleDateFormats method.
+   *
+   * @see \Drupal\Core\Datetime\DateFormatter::getSampleDateFormats()
+   */
+  public function testGetSampleDateFormats() {
+    include_once $this->root . '/core/includes/common.inc';
+    $ts = strtotime('2015-03-22 14:23:00');
+    $this->dateFormatter->setCountry('GB');
+    $expected = $this->dateFormatter->getSampleDateFormats('en', $ts, 'Europe/London');
+
+    // Removed characters related to timezone 'e' and 'T', as test
+    // does not have timezone set.
+    $date_characters = 'dDjlNSwzWFmMntLoYyaABgGhHisuIOPZcrU';
+    $date_chars = str_split($date_characters);
+
+    foreach ($date_chars as $val) {
+      $this->assertEquals($expected[$val], date($val, $ts));
+    }
+  }
+
+}
+
+}
+
+namespace {
+  use Drupal\Component\Utility\String;
+
+  if (!function_exists('t')) {
+    function t($string, array $args = []) {
+      return String::format($string, $args);
+    }
+  }
 }
