diff --git a/tailbone/forms/widgets.py b/tailbone/forms/widgets.py
index 6b74798c..c0bb0b4d 100644
--- a/tailbone/forms/widgets.py
+++ b/tailbone/forms/widgets.py
@@ -27,6 +27,7 @@ Form Widgets
 import json
 import datetime
 import decimal
+import re
 
 import colander
 from deform import widget as dfwidget
@@ -249,6 +250,8 @@ class FalafelDateTimeWidget(dfwidget.DateTimeInputWidget):
     """
     template = 'datetime_falafel'
 
+    new_pattern = re.compile(r'^\d\d?:\d\d:\d\d [AP]M$')
+
     def serialize(self, field, cstruct, **kw):
         """ """
         readonly = kw.get('readonly', self.readonly)
@@ -260,6 +263,13 @@ class FalafelDateTimeWidget(dfwidget.DateTimeInputWidget):
         """ """
         if pstruct  == '':
             return colander.null
+
+        # nb. we now allow '4:20:00 PM' on the widget side, but the
+        # true node needs it to be '16:20:00' instead
+        if self.new_pattern.match(pstruct['time']):
+            time = datetime.datetime.strptime(pstruct['time'], '%I:%M:%S %p')
+            pstruct['time'] = time.strftime('%H:%M:%S')
+
         return pstruct
 
 
diff --git a/tailbone/templates/themes/butterball/field-components.mako b/tailbone/templates/themes/butterball/field-components.mako
index 8f9f884a..8c1d1d70 100644
--- a/tailbone/templates/themes/butterball/field-components.mako
+++ b/tailbone/templates/themes/butterball/field-components.mako
@@ -4,6 +4,7 @@
   ${self.make_numeric_input_component()}
   ${self.make_tailbone_autocomplete_component()}
   ${self.make_tailbone_datepicker_component()}
+  ${self.make_tailbone_timepicker_component()}
 </%def>
 
 <%def name="make_numeric_input_component()">
@@ -461,3 +462,68 @@
 
   </script>
 </%def>
+
+<%def name="make_tailbone_timepicker_component()">
+  <% request.register_component('tailbone-timepicker', 'TailboneTimepicker') %>
+  <script type="text/x-template" id="tailbone-timepicker-template">
+    <o-timepicker :name="name"
+                  v-model="orugaValue"
+                  @update:model-value="orugaValueUpdated"
+                  placeholder="Click to select ..."
+                  icon="clock"
+                  hour-format="12"
+                  :time-formatter="formatTime" />
+  </script>
+  <script>
+
+    const TailboneTimepicker = {
+        template: '#tailbone-timepicker-template',
+
+        props: {
+            modelValue: [Date, String],
+            name: String,
+        },
+
+        data() {
+            return {
+                orugaValue: this.parseTime(this.modelValue),
+            }
+        },
+
+        watch: {
+            modelValue(to, from) {
+                this.orugaValue = this.parseTime(to)
+            },
+        },
+
+        methods: {
+
+            formatTime(value) {
+                if (!value) {
+                    return null
+                }
+
+                return value.toLocaleTimeString('en-US')
+            },
+
+            parseTime(value) {
+
+                if (value.getHours) {
+                    return value
+                }
+
+                let found = value.match(/^(\d\d):(\d\d):\d\d$/)
+                if (found) {
+                    return new Date(null, null, null,
+                                    parseInt(found[1]), parseInt(found[2]))
+                }
+            },
+
+            orugaValueUpdated(value) {
+                this.$emit('update:modelValue', value)
+            },
+        },
+    }
+
+  </script>
+</%def>