diff --git a/app/resources/locales/en_US/field.po b/app/resources/locales/en_US/field.po
index 61c272bb5..28c608e54 100644
--- a/app/resources/locales/en_US/field.po
+++ b/app/resources/locales/en_US/field.po
@@ -98,6 +98,15 @@ msgstr "Created"
 msgid "datepicker.am"
 msgstr "AM"
 
+msgid "datepicker.chooseTime"
+msgstr "Choose time"
+
+msgid "datepicker.enterDate"
+msgstr "Enter a date as YYYY-MM-DD"
+
+msgid "datepicker.enterDateTime"
+msgstr "Enter a date as YYYY-MM-DD HH:MM:SS"
+
 msgid "datepicker.hour"
 msgstr "Hour"
 
diff --git a/app/src/Lib/Enum/DateTypeEnum.php b/app/src/Lib/Enum/DateTypeEnum.php
new file mode 100644
index 000000000..1b2c6e1c7
--- /dev/null
+++ b/app/src/Lib/Enum/DateTypeEnum.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * COmanage Registry Date Type Enum, Standard Variant
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with the
+ * License. You may obtain a copy of the License at:
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @link          https://www.internet2.edu/comanage COmanage Project
+ * @package       registry
+ * @since         COmanage Registry v5.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+
+declare(strict_types = 1);
+
+namespace App\Lib\Enum;
+
+class DateTypeEnum extends StandardEnum {
+  const Standard     = 'standard';
+  const DateOnly     = 'dateonly';
+  const FromTime     = 'fromtime';
+  const ThroughTime  = 'throughtime';
+}
\ No newline at end of file
diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
index a1c04693f..2b09d23b8 100644
--- a/app/src/View/Helper/FieldHelper.php
+++ b/app/src/View/Helper/FieldHelper.php
@@ -30,8 +30,10 @@
 
 namespace App\View\Helper;
 
-use \Cake\Utility\Inflector;
+use Cake\I18n\FrozenTime;
+use Cake\Utility\Inflector;
 use Cake\View\Helper;
+use App\Lib\Enum\DateTypeEnum;
 
 class FieldHelper extends Helper {
   public $helpers = ['Form', 'Html', 'Url', 'Alert'];
@@ -56,7 +58,7 @@ class FieldHelper extends Helper {
    * @return string       HTML for banner
    */
   
-  public function banner(string $info) {
+  public function banner(string $info): string {
     return '<li class="alert-banner">' .
       $this->Alert->alert($info, 'warning')
     . '</li>';
@@ -66,25 +68,29 @@ public function banner(string $info) {
    * Emit a form control.
    *
    * @since  COmanage Registry v5.0.0
-   * @param  string  $fieldName Form field
-   * @param  array   $options   FormHelper control options
-   * @param  string  $labelText Label text (fieldName language key used by default)
-   * @param  array   $config    Custom FormHelper configuration options
+   * @param  string  $fieldName   Form field
+   * @param  array   $options     FormHelper control options
+   * @param  string  $labelText   Label text (fieldName language key used by default)
+   * @param  array   $config      Custom FormHelper configuration options
+   * @param  string  $ctrlCode    Control code passed in from wrapper functions
+   * @param  string  $cssClass    Start li css class passed in from wrapper functions
    * @return string  HTML for control
    */
   
   public function control(string $fieldName,
                           array  $options=[],
                           string $labelText=null,
-                          array $config=[]){
+                          array  $config=[],
+                          string $ctrlCode=null,
+                          string $cssClass=''): string {
     $coptions = $options;
     $coptions['label'] = false;
     $coptions['readonly'] = !$this->editable || (isset($options['readonly']) && $options['readonly']);
     // Selects, Checkboxes, and Radio Buttons use "disabled"
     $coptions['disabled'] = $coptions['readonly'];
     
-    // Generate HTML for the control itself
-    $liClass = "";
+    // Specify a class on the <li> form control wrapper
+    $liClass = $cssClass;
 
     // Remove prefix from field value
     if(isset($config['prefix'], $this->getView()->get('vv_obj')->$fieldName)) {
@@ -94,50 +100,20 @@ public function control(string $fieldName,
       $vv_obj->$fieldName = $fieldValueTemp;
       $this->getView()->set('vv_obj', $vv_obj);
     }
-
-    // Handle datetime controls specially
-    if($fieldName == 'valid_from' || $fieldName == 'valid_through') {
-      // Append the timezone to the label
-      $label = __d('field', $fieldName.".tz", [$this->_View->get('vv_tz')]);
-
-      // A datetime field will be rendered as plain text input with adjacent date and time pickers
-      // that will interact with the field value. Allowing direct access to the input field is for
-      // accessibility purposes.
-      $coptions['class'] = 'form-control datepicker';
-      $coptions['placeholder'] = 'YYYY-MM-DD HH:MM:SS'; // TODO: test for date-only inputs and send only the date
-      $coptions['id'] = str_replace("_", "-", $fieldName);
-      
-      $entity = $this->getView()->get('vv_obj');
-      
-      $pickerDate = '';
-      if(!empty($entity->$fieldName)) {
-        // Adjust the time back to the user's timezone
-        $coptions['value'] = $entity->$fieldName->i18nFormat("yyyy-MM-dd HH:mm:ss", $this->getView()->get('vv_tz'));
-        $pickerDate = $entity->$fieldName->i18nFormat("yyyy-MM-dd", $this->getView()->get('vv_tz'));
-      }
-      
-      $date_args = [
-        'fieldName' => $fieldName,
-        'pickerDate' => $pickerDate
-      ];
-      // Create a text field to hold our value.
-      $controlCode = $this->Form->text($fieldName, $coptions)
-                     . $this->getView()->element('datePicker', $date_args);
-      
-      $liClass = "fields-datepicker";
-    } else {
-      if($fieldName != 'status' 
-         && !isset($options['empty'])
-         && (!isset($options['suppressBlank']) || !$options['suppressBlank'])) {
-        // Cause any select (except status) to render with a blank option, even
-        // if the field is required. This makes it clear when a value need to be set.
-        // Note this will be ignored for non-select controls.
-        $coptions['empty'] = true;
-      }
-      
-      $controlCode = $this->Form->control($fieldName, $coptions);
+    
+    if($fieldName != 'status' 
+       && !isset($options['empty'])
+       && (!isset($options['suppressBlank']) || !$options['suppressBlank'])) {
+      // Cause any select (except status) to render with a blank option, even
+      // if the field is required. This makes it clear when a value need to be set.
+      // Note this will be ignored for non-select controls.
+      $coptions['empty'] = true;
     }
     
+    // Generate the form control or pass along the markup generated in a wrapper function
+    $controlCode = empty($ctrlCode) ? $this->Form->control($fieldName, $coptions) : $ctrlCode;
+    
+    
     // Required fields are usually determined by the model validator, but for
     // related models the view (currently) has to pass the field as required in
     // $options. For fields of the form model.0.field, if $options['required']
@@ -159,6 +135,90 @@ public function control(string $fieldName,
            . $this->endLine();
   }
   
+  /**
+   * Emit a date/time form control.
+   * This is a wrapper function for $this->control()
+   *
+   * @since  COmanage Registry v5.0.0
+   * @param  string $fieldName Form field
+   * @param  string $dateType Standard, DateOnly, FromTime, ThroughTime
+   * 
+   * @return string  HTML for control
+   */
+  
+  public function dateControl(string $fieldName, string $dateType=DateTypeEnum::Standard): string {
+    // A datetime field will be rendered as a plain text input with adjacent date and time pickers
+    // that will interact with the field value. Allowing direct access to the input field is for
+    // accessibility purposes.
+    
+    $pickerType = $dateType;
+    // Special-case the very common "valid_from" and "valid_through" fields so we won't need
+    // to specify their types in fields.inc.
+    if($fieldName == 'valid_from') {
+      $pickerType = DateTypeEnum::FromTime;
+    }
+    if($fieldName == 'valid_through') {
+      $pickerType = DateTypeEnum::ThroughTime;
+    }
+    
+    // Append the timezone to the label -- TODO: see that the timezone gets output to the display
+    $label = __d('field', $fieldName.".tz", [$this->_View->get('vv_tz')]);
+    
+    // Create the options array for the (text input) form control
+    $coptions = [];
+    $coptions['class'] = 'form-control datepicker';
+    
+    if($pickerType == DateTypeEnum::DateOnly) {
+      $coptions['placeholder'] = 'YYYY-MM-DD';
+      $coptions['pattern'] = '\d{4}-\d{2}-\d{2}';
+      $coptions['title'] = __d('field', 'datepicker.enterDate');
+    } else {
+      $coptions['placeholder'] = 'YYYY-MM-DD HH:MM:SS';
+      $coptions['pattern'] = '\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}';
+      $coptions['title'] = __d('field', 'datepicker.enterDateTime');
+    }
+    $coptions['id'] = str_replace("_", "-", $fieldName);
+  
+    $entity = $this->getView()->get('vv_obj');
+  
+    // Default the picker date to today
+    $now = FrozenTime::now();
+    $pickerDate = $now->i18nFormat('yyyy-MM-dd');
+    
+    // Get the existing values, if present
+    if(!empty($entity->$fieldName)) {
+      // Adjust the time back to the user's timezone
+      if($pickerType == DateTypeEnum::DateOnly) {
+        $coptions['value'] = $entity->$fieldName->i18nFormat("yyyy-MM-dd", $this->getView()->get('vv_tz'));
+      } else {
+        $coptions['value'] = $entity->$fieldName->i18nFormat("yyyy-MM-dd HH:mm:ss", $this->getView()->get('vv_tz'));
+      }
+      $pickerDate = $entity->$fieldName->i18nFormat("yyyy-MM-dd", $this->getView()->get('vv_tz'));
+    }
+    
+    // Set the date picker floor year value (-100 years)
+    $pickerDateFT = new FrozenTime($pickerDate);
+    $pickerDateFT = $pickerDateFT->subYears(100);
+    $pickerFloor = $pickerDateFT->i18nFormat("yyyy-MM-dd"); 
+  
+    $date_picker_args = [
+      'fieldName'   => $fieldName,
+      'pickerDate'  => $pickerDate,
+      'pickerType'  => $pickerType,
+      'pickerFloor' => $pickerFloor
+    ];
+    
+    // Create a text field to hold our value and call the datePicker
+    $controlCode = $this->Form->text($fieldName, $coptions)
+      . $this->getView()->element('datePicker', $date_picker_args);
+  
+    // Specify a class on the <li> form control wrapper
+    $liClass = "fields-datepicker";
+    
+    // Pass everything to the generic control() function
+    return $this->control($fieldName, $coptions, '', [], $controlCode, $liClass);
+  }
+  
   /**
    * End a set of form controls.
    *
@@ -166,7 +226,7 @@ public function control(string $fieldName,
    * @return string Control Set end HTML
    */
   
-  public function endControlSet() {
+  public function endControlSet(): string {
     $this->modelName = null;
     
     return "</ul>\n";
@@ -179,7 +239,7 @@ public function endControlSet() {
    * @return string Line end HTML
    */
   
-  protected function endLine() {
+  protected function endLine(): string {
     return "</li>\n";
   }
   
@@ -191,7 +251,7 @@ protected function endLine() {
    * @return string           Form Info HTML
    */
   
-  protected function formInfoDiv(string $content) {
+  protected function formInfoDiv(string $content): string {
     return '<div class="field-info">
       ' . $content . '
     </div>';
@@ -206,7 +266,7 @@ protected function formInfoDiv(string $content) {
    * @return string           Form Info HTML
    */
 
-  protected function formInfoWithPrefixDiv(string $context, string $prefix) {
+  protected function formInfoWithPrefixDiv(string $context, string $prefix): string {
     $div =  '<div class="field-info">' . PHP_EOL
       . '<div class="input-group mb-3">' . PHP_EOL
       . '<div class="input-group-prepend">' . PHP_EOL
@@ -227,7 +287,7 @@ protected function formInfoWithPrefixDiv(string $context, string $prefix) {
    * @return string             Form Name HTML
    */
   
-  protected function formNameDiv(string $fieldName, string $labelText=null) {
+  protected function formNameDiv(string $fieldName, string $labelText=null): string {
     $label = $labelText;
     $desc = null;
     
@@ -310,7 +370,10 @@ protected function formNameDiv(string $fieldName, string $labelText=null) {
    * @return string
    */
   
-  public function statusControl(string $fieldName, string $status, array $link=[], string $labelText=null): string {
+  public function statusControl(string $fieldName, 
+                                string $status, 
+                                array $link=[], 
+                                string $labelText=null): string {
     $linkHtml = $status;
     
     if($link) {
@@ -354,7 +417,11 @@ public function statusControl(string $fieldName, string $status, array $link=[],
    * @return string
    */
   
-  public function startControlSet(string $modelName, string $action, bool $editable, array $reqFields, $entity=null) {
+  public function startControlSet(string $modelName, 
+                                  string $action, 
+                                  bool $editable, 
+                                  array $reqFields, 
+                                  $entity=null): string {
     $this->editable = $editable;
     $this->modelName = $modelName;
     $this->reqFields = $reqFields;
@@ -371,7 +438,7 @@ public function startControlSet(string $modelName, string $action, bool $editabl
    * @return string
    */
   
-  protected function startLine(string $class=null) {
+  protected function startLine(string $class=null): string {
     $ret = '<li';
     
     if($class) {
@@ -391,7 +458,7 @@ protected function startLine(string $class=null) {
    * @return string
    */
   
-  public function submit(string $label) {
+  public function submit(string $label): string {
     return '<li class="fields-submit">
       <div class="field-name">
         <span class="required">* ' . __d('field', 'required') . '</span>
diff --git a/app/templates/ApiUsers/fields.inc b/app/templates/ApiUsers/fields.inc
index e4eb9bc02..80c0c0e00 100644
--- a/app/templates/ApiUsers/fields.inc
+++ b/app/templates/ApiUsers/fields.inc
@@ -56,9 +56,9 @@ if($vv_action == 'add' || $vv_action == 'edit') {
   
   print $this->Field->control('status', ['empty' => false]);
   
-  print $this->Field->control('valid_from');
+  print $this->Field->dateControl('valid_from');
   
-  print $this->Field->control('valid_through');
+  print $this->Field->dateControl('valid_through');
   
   print $this->Field->control('remote_ip');
   
diff --git a/app/templates/ExternalIdentities/fields.inc b/app/templates/ExternalIdentities/fields.inc
index 961774364..04fa8c917 100644
--- a/app/templates/ExternalIdentities/fields.inc
+++ b/app/templates/ExternalIdentities/fields.inc
@@ -30,7 +30,7 @@ if($vv_action == 'add' || $vv_action == 'edit') {
 // XXX sync status?
   print $this->Field->control('status', ['empty' => false]);
   
-  print $this->Field->control('date_of_birth');
+  print $this->Field->dateControl('date_of_birth', \App\Lib\Enum\DateTypeEnum::DateOnly);
 }
 
 // XXX This is a placeholder for canvas... maybe it should become a separate page
diff --git a/app/templates/ExternalIdentityRoles/fields.inc b/app/templates/ExternalIdentityRoles/fields.inc
index 1bd58b465..15e98947a 100644
--- a/app/templates/ExternalIdentityRoles/fields.inc
+++ b/app/templates/ExternalIdentityRoles/fields.inc
@@ -44,13 +44,9 @@ if($vv_action == 'add' || $vv_action == 'edit') {
   
   print $this->Field->control('manager_identifier', [], __d('field', 'manager'));
   
-// XXX these need to render date pickers
-// - we specifically have code in FieldHelper that checks for these two, but not date_of_birth
-//   - can FieldHelper introspect the date type rather than require a hard coded list of fields?
-//     though note valid_from/through uses special logic for 00:00:00 and 23:59:59
-  print $this->Field->control('valid_from');
+  print $this->Field->dateControl('valid_from');
   
-  print $this->Field->control('valid_through');
+  print $this->Field->dateControl('valid_through');
 }
 
 // XXX This is a placeholder for canvas... maybe it should become a separate page
diff --git a/app/templates/GroupMembers/fields.inc b/app/templates/GroupMembers/fields.inc
index 559a946a2..6a9f07665 100644
--- a/app/templates/GroupMembers/fields.inc
+++ b/app/templates/GroupMembers/fields.inc
@@ -32,9 +32,8 @@ if($vv_action == 'add') {
   print $this->Form->hidden('person_id');
 }
 
-// XXX valid from should default to 00:00:00 time, valid through to 23:59:59
-print $this->Field->control('valid_from');
+print $this->Field->dateControl('valid_from');
 
-print $this->Field->control('valid_through');
+print $this->Field->dateControl('valid_through');
 
 // XXX RFE: Add links to EIS or Nesting info
\ No newline at end of file
diff --git a/app/templates/People/fields.inc b/app/templates/People/fields.inc
index ccb3e0a11..3b81e76f6 100644
--- a/app/templates/People/fields.inc
+++ b/app/templates/People/fields.inc
@@ -165,5 +165,5 @@ if($vv_action == 'add') {
 if($vv_action == 'add' || $vv_action == 'edit') {
   print $this->Field->control('status', ['empty' => false]);
   
-  print $this->Field->control('date_of_birth');
+  print $this->Field->dateControl('date_of_birth', \App\Lib\Enum\DateTypeEnum::DateOnly);
 }
\ No newline at end of file
diff --git a/app/templates/PersonRoles/fields.inc b/app/templates/PersonRoles/fields.inc
index b163efe3c..af8ad74bc 100644
--- a/app/templates/PersonRoles/fields.inc
+++ b/app/templates/PersonRoles/fields.inc
@@ -57,13 +57,9 @@ if($vv_action == 'add' || $vv_action == 'edit') {
     print $this->Field->statusControl($f.'_person_id', $fname, $flink, __d('field', $f));
   }
   
-// XXX these need to render date pickers
-// - we specifically have code in FieldHelper that checks for these two, but not date_of_birth
-//   - can FieldHelper introspect the date type rather than require a hard coded list of fields?
-//     though note valid_from/through uses special logic for 00:00:00 and 23:59:59
-  print $this->Field->control('valid_from');
+  print $this->Field->dateControl('valid_from');
   
-  print $this->Field->control('valid_through');
+  print $this->Field->dateControl('valid_through');
 }
 
 // XXX This is a placeholder for canvas... maybe it should become a separate page
diff --git a/app/templates/element/datePicker.php b/app/templates/element/datePicker.php
index 077242672..e04bc9b0e 100644
--- a/app/templates/element/datePicker.php
+++ b/app/templates/element/datePicker.php
@@ -1,7 +1,9 @@
 <?php
 // Get parameters
-$fieldName = $fieldName ?? "";
-$pickerDate = $pickerDate ?? "";
+$fieldName   = $fieldName ?? "";
+$pickerDate  = $pickerDate ?? "";
+$pickerType  = $pickerType ?? \App\Lib\Enum\DateTypeEnum::Standard;
+$pickerFloor = $pickerFloor ?? "";
 
 // Create a date/time picker. The yyyy-MM-dd format is set above in $pickerDate.
 
@@ -10,9 +12,12 @@
 // like the models that use the Tree behavior and have the column parent_id
 $pickerId     = 'datepicker-' . str_replace("_", "-", $fieldName);
 $pickerTarget = str_replace("_", "-", $fieldName);
-$pickerTimed  = $pickerTimed ?? true; // TODO: set false if date-only
 $pickerAmPm   = $pickerAmPm ?? false; // TODO: allow change between AM/PM and 24-hour mode
 
+// Set the min and max dates to allow for a wide range of year selections in the datepicker.
+$pickerDateMin = $pickerFloor; // We are passing in -100 years from FieldHelper where the values are constructed.
+$pickerDateMax = ''; // If empty, the date picker will default to +10 years.
+
 ?>
 
 <script type="module">
@@ -24,13 +29,16 @@
         id: "<?= $pickerId ?>",
         target: "<?= $pickerTarget ?>",
         date: "<?= $pickerDate ?>",
-        timed: <?= ($pickerTimed ? 'true' : 'false') ?>,
+        datemin: "<?= $pickerDateMin ?>",
+        datemax: "<?= $pickerDateMax ?>",
+        type: "<?= $pickerType ?>",
         ampm: <?= ($pickerAmPm ? 'true' : 'false') ?>,
         txt: {
           hour: "<?= __d('field', 'datepicker.hour') ?>",
           minute: "<?= __d('field', 'datepicker.minute') ?>",
           am: "<?= __d('field', 'datepicker.am') ?>",
-          pm: "<?= __d('field', 'datepicker.pm') ?>"
+          pm: "<?= __d('field', 'datepicker.pm') ?>",
+          choosetime: "<?= __d('field', 'datepicker.chooseTime') ?>"
         }
       }
     },
@@ -63,7 +71,9 @@
     :id="id"
     :target="target"
     :date="date"
-    :timed="timed"
+    :datemin="datemin"
+    :datemax="datemax"
+    :type="type"
     :ampm="ampm"
     :txt="txt">
   </cm-date-time-picker>
diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css
index 02412bea4..1576ec0f0 100644
--- a/app/webroot/css/co-color.css
+++ b/app/webroot/css/co-color.css
@@ -81,14 +81,14 @@
   --cmg-color-black: #000;            /* black */
   
   /* Duet Date Picker Colors */
-  --duet-color-primary: #005fcc;
-  --duet-color-text: #333;
+  --duet-color-primary: #06c;
+  --duet-color-text: #222;
   --duet-color-text-active: #fff;
   --duet-color-placeholder: #666;
   --duet-color-button: #f5f5f5;
   --duet-color-surface: #fff;
   --duet-color-overlay: rgba(0, 0, 0, 0.8);
-  --duet-color-border: #333;
+  --duet-color-border: #222;
 
   --duet-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --duet-font-normal: 400;
diff --git a/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js b/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js
index f038808b5..01a0c9a67 100644
--- a/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js
+++ b/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js
@@ -29,7 +29,9 @@ export default {
     id: String,
     target: String,
     date: String,
-    timed: Boolean,
+    datemin: String,
+    datemax: String,
+    type: String,
     ampm: Boolean,
     txt: Object
   },
@@ -46,30 +48,39 @@ export default {
       const dateField = document.getElementById(this.target);
       if(dateField.value === '') {
         // There's no existing value, so just format what's given.
-        dateField.value = date + " 00:00:00";
-        // If using a Date object, use the following instead:
-        // dateField.value = this.formatDate(date);  
+        dateField.value = date;
+        if(this.type != 'dateonly') {
+          if(this.type == 'throughtime') {
+            dateField.value += " 23:59:59";
+          } else {
+            dateField.value += " 00:00:00";  
+          }
+        }
       } else {
-        // We need to apply the given date to our existing field value so we can retain the time.
-        const dateTime = dateField.value.split(' ');
-        dateTime[0] = date;
-        // A sanity check to see if someone messed up the field.
-        // XXX Pattern should also be enforced by the browser.
-        if(dateTime[1] === undefined || dateTime[1] === '') {
-          dateTime[1] = '00:00:00';
+        if(this.type == 'dateonly') {
+          dateField.value = date;
+        } else  {
+          // We need to apply the given date to our existing field value so we can retain the time.
+          const dateTime = dateField.value.split(' ');
+          dateTime[0] = date;
+          // A sanity check to see if someone messed up the field.
+          // The pattern is also enforced by the browser via the "pattern" attribute.
+          if(dateTime[1] === undefined || dateTime[1] === '') {
+            dateTime[1] = '00:00:00';
+          }
+          dateField.value = dateTime.join(' ');  
         }
-        dateField.value = dateTime.join(' ');
       }
     },
     formatDate(date) {
-      // Consider using Luxon for JavaScript Date/Time formatting if
-      // we get any more complicated than this.
       let formattedDate = date.getFullYear();
       formattedDate += '-' + ('0' + (date.getMonth()+1)).slice(-2);
       formattedDate += '-' + ('0' + date.getDate()).slice(-2);
-      formattedDate += ' ' + ('0' + date.getHours()).slice(-2);
-      formattedDate += ':' + ('0' + date.getMinutes()).slice(-2);
-      formattedDate += ':' + ('0' + date.getSeconds()).slice(-2);
+      if(this.type != 'dateonly') {
+        formattedDate += ' ' + ('0' + date.getHours()).slice(-2);
+        formattedDate += ':' + ('0' + date.getMinutes()).slice(-2);
+        formattedDate += ':' + ('0' + date.getSeconds()).slice(-2);
+      }
       return(formattedDate);
     },
     showTimePicker() {
@@ -90,7 +101,7 @@ export default {
         // We need to apply the given time to our existing field value so we can retain the date.
         dateTime = dateField.value.split(' ');
         // A sanity check to see if someone messed up the field.
-        // XXX Pattern should also be enforced by the browser.
+        // The pattern is also enforced by the browser via the "pattern" attribute.
         if (dateTime[1] === undefined || dateTime[1] === '') {
           // Clear the field and start with today
           dateField.value = '';
@@ -160,13 +171,16 @@ export default {
       <duet-date-picker 
         :name="this.id" 
         :identifier="this.id"
-        :value="this.date"    
+        :value="this.date"
+        :min="this.datemin"
+        :max="this.datemax"
         @duetChange="setFieldDate" 
         ref="curDuetPicker">
       </duet-date-picker>
-      <div v-if="this.timed" class="cm-time-picker">
+      <div v-if="this.type != 'dateonly'" class="cm-time-picker">
         <button @click.stop.prevent="showTimePicker" type="button" class="btn">
-          <em class="material-icons">schedule</em>
+          <em class="material-icons"  aria-hidden="true">schedule</em>
+          <span class="visually-hidden">{{ this.txt.choosetime }}</span>
         </button>
         <Transition>
           <cm-time-picker
diff --git a/app/webroot/js/comanage/components/datepicker/cm-timepicker.js b/app/webroot/js/comanage/components/datepicker/cm-timepicker.js
index d5fdcbc9a..fb93378be 100644
--- a/app/webroot/js/comanage/components/datepicker/cm-timepicker.js
+++ b/app/webroot/js/comanage/components/datepicker/cm-timepicker.js
@@ -37,7 +37,8 @@ export default {
   },
   methods: {
     setTime(e,type) {
-      this.$emit('setTime',type,e.target.innerText);
+      let timeValue = e.currentTarget.querySelector('.cm-time-picker-val').innerText;
+      this.$emit('setTime', type, timeValue);
     },
     hide() {
       this.$emit('hide');
@@ -47,13 +48,16 @@ export default {
     this.$refs.timepicker.focus();
   },
   template: `
-    <div class="cm-time-picker-panel" ref="timepicker" v-clickout="hide" @keydown.esc="hide" tabindex="-1">
+    <div class="cm-time-picker-panel" role="dialog" ref="timepicker" v-clickout="hide" @keydown.esc="hide" tabindex="-1">
       <div class="cm-time-picker-hours">
         <div class="cm-time-picker-title">{{ txt.hour }}</div>
         <div class="cm-time-picker-vals">
           <ul>
             <li v-for="n in 24">              
-              <button @click.stop.prevent="setTime($event,'hour')" type="button" class="btn">{{ ('0' + (n-1)).slice(-2) }}</button>
+              <button @click.stop.prevent="setTime($event,'hour')" type="button" class="btn">
+                <span class="cm-time-picker-val" aria-hidden="true">{{ ('0' + (n-1)).slice(-2) }}</span>
+                <span class="visually-hidden">{{ this.txt.hour }} {{ n-1 }}</span>
+              </button>
             </li>  
           </ul>
         </div>
@@ -64,7 +68,10 @@ export default {
         <div class="cm-time-picker-vals">
           <ul>
             <li v-for="val of minuteVals">
-              <button @click.stop.prevent="setTime($event,'minute')" type="button"  class="btn">{{ val }}</button>
+              <button @click.stop.prevent="setTime($event,'minute')" type="button"  class="btn">
+                <span class="cm-time-picker-val" aria-hidden="true">{{ val }}</span>
+                <span class="visually-hidden">{{ this.txt.minute }} {{ val }}</span>
+              </button>
             </li>
           </ul>
         </div>