diff --git a/src/wuttaweb/templates/themes/butterfly/buefy-components.mako b/src/wuttaweb/templates/themes/butterfly/buefy-components.mako
index 9c6cc48..1d7e3af 100644
--- a/src/wuttaweb/templates/themes/butterfly/buefy-components.mako
+++ b/src/wuttaweb/templates/themes/butterfly/buefy-components.mako
@@ -5,6 +5,7 @@
   ${self.make_b_checkbox_component()}
   ${self.make_b_collapse_component()}
   ${self.make_b_datepicker_component()}
+  ${self.make_b_timepicker_component()}
   ${self.make_b_dropdown_component()}
   ${self.make_b_dropdown_item_component()}
   ${self.make_b_field_component()}
@@ -237,6 +238,45 @@
   <% request.register_component('b-datepicker', 'BDatepicker') %>
 </%def>
 
+<%def name="make_b_timepicker_component()">
+  <script type="text/x-template" id="b-timepicker-template">
+    <o-timepicker v-model="orugaValue"
+                  @update:model-value="orugaValueUpdated"
+                  :formatter="timeFormatter"
+                  :parser="timeParser" />
+  </script>
+  <script>
+    const BTimepicker = {
+        template: '#b-timepicker-template',
+        props: {
+            modelValue: null,
+            timeFormatter: null,
+            timeParser: null,
+        },
+        data() {
+            return {
+                orugaValue: this.modelValue,
+            }
+        },
+        watch: {
+            modelValue(to, from) {
+                if (this.orugaValue != to) {
+                    this.orugaValue = to
+                }
+            },
+        },
+        methods: {
+            orugaValueUpdate(value) {
+                if (this.modelValue != value) {
+                    this.$emit('update:modelValue', value)
+                }
+            },
+        },
+    }
+  </script>
+  <% request.register_component('b-timepicker', 'BTimepicker') %>
+</%def>
+
 <%def name="make_b_dropdown_component()">
   <script type="text/x-template" id="b-dropdown-template">
     <o-dropdown :position="buefyPosition"