diff --git a/README.md b/README.md
index 9b1022fb819c38cfc690bb69f43192ac6bb7f9e5..c216fd50dfb9937a5109341d908b20af5644d360 100644
--- a/README.md
+++ b/README.md
@@ -43,4 +43,9 @@ exposes a new formatter that can be uqsed on date fields
 
 * Navigate to `admin/structure/block`
 * Click `place block`
-* Add a new instance of the block "Clock" and configure it.
\ No newline at end of file
+* Add a new instance of the block "Clock" and configure it.
+
+### Formatter
+
+* Navigate to the Manage display tab of your entity and change to formatter to "FlipClock"
+* Configure formatter and save
\ No newline at end of file
diff --git a/src/Plugin/Field/FieldFormatter/DateTimeFlipClockFormatter.php b/src/Plugin/Field/FieldFormatter/DateTimeFlipClockFormatter.php
new file mode 100644
index 0000000000000000000000000000000000000000..72ab0c3c1ec5a8b62b0f63d274ad8e15cc92e65b
--- /dev/null
+++ b/src/Plugin/Field/FieldFormatter/DateTimeFlipClockFormatter.php
@@ -0,0 +1,152 @@
+<?php
+
+namespace Drupal\flipclock\Plugin\Field\FieldFormatter;
+
+use Drupal\Core\Datetime\DrupalDateTime;
+use Drupal\Core\Field\FieldItemListInterface;
+use Drupal\Core\Field\FormatterBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Plugin implementation of the 'FlipClock' formatter for 'datetime' fields.
+ *
+ * @FieldFormatter(
+ *   id = "flipclock_clock",
+ *   label = @Translation("FlipClock"),
+ *   field_types = {
+ *     "datetime"
+ *   }
+ *)
+ */
+class DateTimeFlipClockFormatter extends FormatterBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+    return [
+        'clock_face' => 'HourlyCounter',
+        'auto_play' => TRUE,
+        'auto_start' => TRUE,
+        'countdown' => FALSE,
+        'show_seconds' => TRUE,
+      ] + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function viewElements(FieldItemListInterface $items, $langcode) {
+    $elements = [];
+
+    foreach ($items as $delta => $item) {
+      if ($item->date) {
+        /** @var \Drupal\Core\Datetime\DrupalDateTime $date */
+        $date = $item->date;
+
+        $id = 'flipclock-' . uniqid();
+
+        $instance = [
+          'timestamp' => (int) strtotime($date->format("Y-m-d\TH:i:s") . 'Z'),
+          'options' => [
+            'clockFace' => $this->getSetting('clock_face'),
+            'autoPlay' => $this->getSetting('auto_play') ? TRUE : FALSE,
+            'autoStart' => $this->getSetting('auto_start') ? TRUE : FALSE,
+            'countdown' => $this->getSetting('countdown') ? TRUE : FALSE,
+            'showSeconds' => $this->getSetting('show_Seconds') ? TRUE : FALSE,
+          ],
+        ];
+
+        $build = [
+          '#theme' => 'flipclock',
+          '#id' => $id,
+          '#attached' => [
+            'library' => ['flipclock/flipclock.load'],
+          ],
+        ];
+
+        $build['#attached']['drupalSettings']['flipClock']['instances'][$id] = $instance;
+        $elements[$delta] = $build;
+      }
+
+    }
+
+    return $elements;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $form = parent::settingsForm($form, $form_state);
+
+    $form['clock_face'] = [
+      '#type' => 'select',
+      '#title' => $this->t('Clock'),
+      '#options' => [
+        'HourlyCounter' => $this->t('Hourly Counter'),
+        'MinuteCounter' => $this->t('Minute Counter'),
+        'DailyCounter' => $this->t('Daily Counter'),
+        'TwelveHourClock' => $this->t('12hr Clock'),
+        'TwentyFourHourClock' => $this->t('24hr Clock'),
+      ],
+      '#description' => $this->t('This is the name of the clock that is used to build the clock display.'),
+      '#required' => TRUE,
+      '#default_value' => $this->getSetting('clock_face'),
+    ];
+
+    $form['auto_play'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Auto play'),
+      '#description' => $this->t('Indicate if the clock should automatically add the play class to start the animation.'),
+      '#default_value' => $this->getSetting('auto_play'),
+    ];
+
+    $form['auto_start'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Auto start'),
+      '#description' => $this->t('Indicate if the clock should start automatically.'),
+      '#default_value' => $this->getSetting('auto_start'),
+    ];
+
+    $form['countdown'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Countdown'),
+      '#description' => $this->t('Indicate if the clock will count down instead of up.'),
+      '#default_value' => $this->getSetting('countdown'),
+    ];
+
+    $form['show_seconds'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Show seconds'),
+      '#description' => $this->t('Indicate if the clock should include a seconds display.'),
+      '#default_value' => $this->getSetting('show_seconds'),
+    ];
+
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsSummary() {
+    $summary = parent::settingsSummary();
+
+    $clocks = [
+      'HourlyCounter' => $this->t('Hourly Counter'),
+      'MinuteCounter' => $this->t('Minute Counter'),
+      'DailyCounter' => $this->t('Daily Counter'),
+      'TwelveHourClock' => $this->t('12hr Clock'),
+      'TwentyFourHourClock' => $this->t('24hr Clock'),
+    ];
+
+    $summary[] = $this->t('Clock: @clock', ['@clock' => $clocks[$this->getSetting('clock_face')]]);
+    $summary[] = $this->t('Auto play: @auto_play', ['@auto_play' => $this->getSetting('auto_play') ? $this->t('Yes') : $this->t('No')]);
+    $summary[] = $this->t('Auto start: @auto_start', ['@auto_start' => $this->getSetting('auto_start') ? $this->t('Yes') : $this->t('No')]);
+    $summary[] = $this->t('Countdown: @countdown', ['@countdown' => $this->getSetting('countdown') ? $this->t('Yes') : $this->t('No')]);
+    $summary[] = $this->t('Show seconds: @show_seconds', ['@show_seconds' => $this->getSetting('show_seconds') ? $this->t('Yes') : $this->t('No')]);
+
+    return $summary;
+  }
+
+}