diff --git a/src/Element/OfficeHoursList.php b/src/Element/OfficeHoursList.php
index 8c1c7ad..a30de14 100644
--- a/src/Element/OfficeHoursList.php
+++ b/src/Element/OfficeHoursList.php
@@ -10,6 +10,7 @@ namespace Drupal\office_hours\Element;
 use Drupal\Core\Datetime\DrupalDateTime;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Render\Element\FormElement;
+use Drupal\Component\Utility\NestedArray;
 use Drupal\office_hours\OfficeHoursDateHelper;
 
 /**
@@ -38,6 +39,7 @@ class OfficeHoursList extends FormElement {
           'office_hours/office_hours',
         ),
       ),
+      '#date_element_type' => 'datelist',
     );
     return $info;
   }
@@ -46,7 +48,15 @@ class OfficeHoursList extends FormElement {
    * {@inheritdoc}
    */
   public static function valueCallback(&$element, $input, FormStateInterface $form_state) {
-    $input = parent::valueCallback($element, $input, $form_state);
+    if ($input) {
+      // Let child elements set starthours and endhours via their valueCallback.
+      unset($input['starthours']);
+      unset($input['endhours']);
+    }
+    else {
+      $input = $element['#default_value'];
+    }
+
     return $input;
   }
 
@@ -92,6 +102,7 @@ class OfficeHoursList extends FormElement {
       '#type' => 'office_hours_select', // datelist, datetime.
       '#default_value' => isset($element['#value']['starthours']) ? $element['#value']['starthours'] : NULL,
       '#field_settings' => $element['#field_settings'],
+      '#date_element_type' => $element['#date_element_type'],
       // Attributes for element \Drupal\Core\Datetime\Element\Datelist.
       '#date_part_order' => (in_array($element['#field_settings']['time_type'], ['g', 'h']))
         ? array('hour', 'minute', 'ampm',)
@@ -105,21 +116,12 @@ class OfficeHoursList extends FormElement {
 //      '#suffix' => $suffix,
       '#default_value' => isset($element['#value']['endhours']) ? $element['#value']['endhours'] : NULL,
       '#field_settings' => $element['#field_settings'],
+      '#date_element_type' => $element['#date_element_type'],
       // Attributes for element \Drupal\Core\Datetime\Element\Datelist.
       '#date_part_order' => (in_array($element['#field_settings']['time_type'], ['g', 'h']))
         ? array('hour', 'minute', 'ampm',)
         : array('hour', 'minute',),
       '#date_increment' => $element['#field_settings']['increment'],
-//      '#theme_wrappers' => array('datetime_wrapper'),
-//      '#date_date_format' => 'none', // $date_format,
-//      '#date_date_element' => 'none', // 'date',
-//      '#date_date_callbacks' => array(),
-//      '#date_time_format' => $time_format,
-//      '#date_time_element' => 'time',
-//      '#date_time_callbacks' => array(),
-//      '#date_year_range' => FALSE, // '2000:2000',
-//      '#date_timezone' => '',
-// End of attributes for datelist element.
     );
 
     return $element;
@@ -137,7 +139,9 @@ class OfficeHoursList extends FormElement {
   public static function validateOfficeHoursSlot(&$element, FormStateInterface $form_state, &$complete_form) {
     $error_text = '';
 
-    $input_exists = TRUE;
+    // Test code.
+    $input_exists = FALSE;
+    $item = NestedArray::getValue($form_state->getValues(), $element['#parents'], $input_exists);
 
     if ($input_exists) {
 
@@ -146,8 +150,8 @@ class OfficeHoursList extends FormElement {
       $limitend = $element['#field_settings']['limitend'];
 
       // Numeric value is set in OfficeHoursSelect::validateOfficeHours()
-      $start = (is_numeric($element['starthours']['#value'])) ? $element['starthours']['#value'] : '';
-      $end = (is_numeric($element['endhours']['#value'])) ? $element['endhours']['#value'] : '';
+      $start = (is_numeric($item['starthours'])) ? $item['starthours'] : '';
+      $end = (is_numeric($item['endhours'])) ? $item['endhours'] : '';
 
       if (!empty($start) xor !empty($end)) {
         $error_text = 'Both Opening hours and Closing hours must be set.';
@@ -171,7 +175,7 @@ class OfficeHoursList extends FormElement {
 //        }
 
       if ($error_text) {
-        $error_text = $element['#dayname']  // Day name is already translated.
+        $error_text = OfficeHoursDateHelper::weekDays()[$item['day']]  // Day name is already translated.
           . ': '
           . t($error_text,
             array(
@@ -182,6 +186,14 @@ class OfficeHoursList extends FormElement {
           );
         $form_state->setError($element, $error_text);
       }
+      else {
+//        $input = array(
+//          'day' => $item['day'],
+//          'starthours' => $item['starthours']->format('Hi'),
+//          'endhours' => $item['endhours']->format('Hi'),
+//        );
+//        $form_state->setValueForElement($element, $input);
+      }
     }
   }
 
diff --git a/src/Element/OfficeHoursSelect.php b/src/Element/OfficeHoursSelect.php
index 45d67fe..209e230 100644
--- a/src/Element/OfficeHoursSelect.php
+++ b/src/Element/OfficeHoursSelect.php
@@ -7,21 +7,22 @@
 
 namespace Drupal\office_hours\Element;
 
-use Drupal\Component\Datetime\DateTimePlus;
 use Drupal\Core\Datetime\DrupalDateTime;
 use Drupal\Core\Datetime\Element\Datelist;
 use Drupal\Core\Datetime\Element\Datetime;
+use Drupal\Core\Datetime\Entity\DateFormat;
 use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Render\Element\FormElement;
+use Drupal\Component\Datetime\DateTimePlus;
+use Drupal\Component\Utility\NestedArray;
 use Drupal\office_hours\OfficeHoursDateHelper;
 
-//use Drupal\Core\Render\Element\FormElement;
-
 /**
  * Provides a one-line text field form element.
  *
  * @FormElement("office_hours_select")
  */
-class OfficeHoursSelect extends Datelist { // { Datelist | Datetime | FormElement}
+class OfficeHoursSelect extends FormElement { //Datetime {
 
   /**
    * {@inheritdoc}
@@ -34,37 +35,30 @@ class OfficeHoursSelect extends Datelist { // { Datelist | Datetime | FormElemen
       '#tree' => TRUE,
       '#process' => array(
         array($class, 'processOfficeHours'),
+        array($class, 'processGroup'),
       ),
       '#element_validate' => array(
         array($class, 'validateOfficeHours'),
       ),
+      '#pre_render' => array(
+        array($class, 'preRenderGroup'),
+      ),
 //      '#attached' => array(
 //        'library' => array(
 //          'office_hours/office_hours',
 //        ),
 //      ),
-
-      // @see Drupal\Core\Datetime\Element\Datelist.
-      '#date_part_order' => array('year', 'month', 'day', 'hour', 'minute'),
-      // @see Drupal\Core\Datetime\Element\Datetime.
-      '#date_date_element' => 'none', // {'none'|'date'}
-      '#date_time_element' => 'time', // {'none'|'time'|'text'}
-      '#date_date_format' => 'none',
-//      '#date_date_callbacks' => array(),
-//      '#date_time_format' => 'time', // see format_date()
-      '#date_time_callbacks' => array(), // Can be used to add a jQuery timepicker or an 'All day' checkbox.
-      '#date_year_range' => '1900:2050',
-      // @see Drupal\Core\Datetime\Element\DateElementBase.
-      '#date_timezone' => NULL, // new \DateTimezone(DATETIME_STORAGE_TIMEZONE),
+      '#date_element_type' => 'datelist',
     );
 
+    /*
     $parent_info = parent::getInfo();
 
     // #process, #validate bottom-up.
     $info['#process'] = array_merge($parent_info['#process'], $info['#process']);
     $info['#element_validate'] = array_merge($parent_info['#element_validate'], $info['#element_validate']);
-
-    return $info + $parent_info;
+    */
+    return $info;// + $parent_info;
   }
 
   /**
@@ -85,28 +79,53 @@ class OfficeHoursSelect extends Datelist { // { Datelist | Datetime | FormElemen
   public static function valueCallback(&$element, $input, FormStateInterface $form_state) {
 
     if ($input !== FALSE) {
-      $input = parent::valueCallback($element, $input, $form_state);
+
+      if ($element['#date_element_type'] == 'datetime') {
+        // Let child element set time via their valueCallback.
+        unset($input['time']);
+      }
+      elseif($element['#date_element_type'] == 'datelist') {
+        $time_element = $input['time'];
+
+        if(empty($time_element['hour']) && empty($time_element['minute'])) {
+          // Set our hidden values to empty. Let Datelist class return the empty
+          // value.
+          $input['time'] = array(
+            'month' => '',
+            'day' => '',
+            'year' => '',
+          );
+        }
+        else {
+          // Let child element set time via their valueCallback.
+          unset($input['time']);
+        }
+      }
     }
     else {
       $date = NULL;
 
-      // Prepare the numeric value: use a DateTime value.
       $time = $element['#default_value'];
-      try {
-        if (is_array($time)) {
-          $date = DrupalDateTime::createFromArray($time);
+      $time_type = $element['#field_settings']['time_type'];
+      $timezone = new \DateTimezone(DATETIME_STORAGE_TIMEZONE); // @todo:get from Widget.
+
+      if (is_numeric($time)) {
+        try {
+          $timeformat = OfficeHoursDateHelper::getTimeFormat($time_type); // 12hrs or 24hrs
+          $time = DateTimePlus::datePad($time, 4);
+          $date = DrupalDateTime::createFromFormat('Hi', $time, $timezone);
+          if ($date instanceof DrupalDateTime && $date->hasErrors()) {
+            $date = NULL;
+          }
         }
-        elseif(is_numeric($time))  {
-          $timezone = $element['#date_timezone'];
-          $date = DrupalDateTime::createFromFormat('Gi', DateTimePlus::datePad($time, 4), $timezone);
+        catch (\Exception $e) {
+          $date = NULL;
         }
       }
-      catch (\Exception $e) {
-        $date = NULL;
-      }
-      $element['#default_value'] = $date;
 
-      $input = parent::valueCallback($element, $input, $form_state);
+      $input = array(
+        'object' => $date,
+      );
     }
 
     return $input;
@@ -120,14 +139,68 @@ class OfficeHoursSelect extends Datelist { // { Datelist | Datetime | FormElemen
    * @param $form
    * @return
    */
-  public static function processOfficeHours(&$element, FormStateInterface $form_state, &$complete_form) {
-    $settings = $element['#field_settings'];
-    $default_value = $element['#value'];
+  public static function processOfficeHours($element, FormStateInterface &$form_state, $form) {
 
-    // The element has just been processed. Adjust values.
+    // The value callback has populated the #value array.
+    $default_value = !empty($element['#value']['object']) ? $element['#value']['object'] : NULL;
 
-    // Get the valid, restricted hours. Date API doesn't provide a straight method for this.
-    $element['hour']['#options'] = OfficeHoursDateHelper::hours($settings['time_type'], FALSE, $settings['limitstart'], $settings['limitend']);
+    $settings = $element['#field_settings'];
+    $time_type = $settings['time_type'];
+    $timezone = new \DateTimezone(DATETIME_STORAGE_TIMEZONE); // @todo:get from Widget.
+
+    // Render as a datelist element.
+    if ($element['#date_element_type'] == 'datelist') {
+      $element['time'] = array(
+        '#type' => 'datelist',
+        '#default_value' => $default_value,
+        '#date_part_order' => (in_array($time_type, ['g','h']))
+          ? array('hour', 'minute', 'ampm',)
+          : array('hour', 'minute',),
+        '#error_no_message' => TRUE,
+      );
+
+      // Datelist element expects a date value, not just time.
+      // So make something up.
+      $element['time']['year'] = array(
+        '#type' => 'hidden',
+        '#value' => 1,
+      );
+      $element['time']['month'] = array(
+        '#type' => 'hidden',
+        '#value' => 1,
+      );
+      $element['time']['day'] = array(
+        '#type' => 'hidden',
+        '#value' => 1,
+      );
+    }
+    elseif ($element['#date_element_type'] == 'datetime') {
+      $date_type = 'none';
+      $time_type = 'time';
+      $time_format = DateFormat::load('html_time')->getPattern();
+      $element['time'] = array(
+        '#type' => 'datetime',
+        //'#title' => t('Start'),
+        //'#date_date_format'=>  $date_format,
+        '#date_date_element' => $date_type,
+        '#date_date_callbacks' => array(),
+        '#date_time_format' => $time_format,
+        '#date_time_element' => $time_type,
+        '#date_time_callbacks' => array(),
+        '#date_timezone' => $timezone,
+        '#date_increment' => 60 * $settings['increment'],
+        '#default_value' => $default_value,
+      );
+      $timeformat = 'H:i:s';
+      if (!empty($settings['limitstart'])) {
+        $date = DrupalDateTime::createFromFormat('H', $settings['limitstart'], $timezone);
+        $element['time']['#attributes']['min'] = $date->format($timeformat);
+      }
+      if (!empty($settings['limitend'])) {
+        $date = DrupalDateTime::createFromFormat('H', $settings['limitend'], $timezone);
+        $element['time']['#attributes']['max'] = $date->format($timeformat);
+      }
+    }
 
     return $element;
   }
@@ -139,28 +212,12 @@ class OfficeHoursSelect extends Datelist { // { Datelist | Datetime | FormElemen
    * @param $form_state
    */
   public static function validateOfficeHours(&$element, FormStateInterface $form_state, &$complete_form) {
-    // $input_exists = FALSE;
-    // $input = NestedArray::getValue($form_state->getValues(), $element['#parents'], $input_exists);
-    $input_exists = TRUE;
-    $input = $element['#value'];
 
+    $input_exists = FALSE;
+    $input = NestedArray::getValue($form_state->getValues(), $element['#parents'], $input_exists);
     if ($input_exists) {
-      if (isset($input['hour']) && !isset($input['object'])) {
-        // D7 FormElement.
-        $form_state->setValueForElement($element, '');
-      }
-      elseif (isset($input['object'])) {
-        // For Datelist, Datetime element.
-        if ($input['object']) {
-          $value = (string) $input['object']->format('Gi');
-          $form_state->setValueForElement($element, $value);
-
-          // Set the value for usage in OfficeHoursList::validateOfficeHoursSlot().
-          $element['#value'] = $value;
-        }
-        else {
-          $form_state->setValueForElement($element, '');
-        }
+      if ($input['time'] instanceof DrupalDateTime) {
+        $form_state->setValueForElement($element, (int) $input['time']->format('Hi'));
       }
       else {
         $form_state->setValueForElement($element, '');
diff --git a/src/Element/OfficeHoursTable.php b/src/Element/OfficeHoursTable.php
index 54ff632..ea62cbb 100644
--- a/src/Element/OfficeHoursTable.php
+++ b/src/Element/OfficeHoursTable.php
@@ -19,12 +19,12 @@ class OfficeHoursTable extends Table {
 
   public static function valueCallback(&$element, $input, FormStateInterface $form_state) {
     if ($input) {
-      $input = parent::valueCallback($element, $input, $form_state);
-//      // Let child elements set starthours and endhours via their valueCallback.
-//      foreach($input as $key => $value) {
-//        unset($input[$key]['starthours']);
-//        unset($input[$key]['endhours']);
-//      }
+//      $input = parent::valueCallback($element, $input, $form_state);
+      // Let child elements set starthours and endhours via their valueCallback.
+      foreach($input as $key => $value) {
+        unset($input[$key]['starthours']);
+        unset($input[$key]['endhours']);
+      }
     }
     else {
       $input = parent::valueCallback($element, $input, $form_state);