Add custom form type/widget for time fields

ugh this still isn't that great, but making progress overall

tailbone/forms/core.py

@@ -610,9 +610,14 @@ class Form(object):
             # TODO: is this safe / a good idea?
             # self.set_node(key, colander.Date())
             self.set_widget(key, JQueryDateWidget())
+
         elif type_ == 'time_jquery':
             self.set_node(key, types.JQueryTime())
             self.set_widget(key, JQueryTimeWidget())
+
+        elif type_ == 'time_falafel':
+            self.set_node(key, types.FalafelTime(request=self.request))
+
         elif type_ == 'duration':
             self.set_renderer(key, self.render_duration)
         elif type_ == 'boolean':

tailbone/forms/types.py

@@ -118,6 +118,18 @@ class FalafelDateTime(colander.DateTime):
         return result
 
 
+class FalafelTime(colander.Time):
+    """
+    Custom schema node type for simple time fields
+    """
+    widget_maker = widgets.FalafelTimeWidget
+
+    def __init__(self, *args, **kwargs):
+        request = kwargs.pop('request')
+        super().__init__(*args, **kwargs)
+        self.request = request
+
+
 class GPCType(colander.SchemaType):
     """
     Schema type for product GPC data.

tailbone/forms/widgets.py

@@ -243,6 +243,18 @@ class FalafelDateTimeWidget(dfwidget.DateTimeInputWidget):
     template = 'datetime_falafel'
 
 
+class FalafelTimeWidget(dfwidget.TimeInputWidget):
+    """
+    Custom widget for simple time fields
+    """
+    template = 'time_falafel'
+
+    def deserialize(self, field, pstruct):
+        if pstruct  == '':
+            return colander.null
+        return pstruct
+
+
 class JQueryAutocompleteWidget(dfwidget.AutocompleteInputWidget):
     """ 
     Uses the jQuery autocomplete plugin, instead of whatever it is deform uses

tailbone/templates/deform/time_falafel.pt

@@ -0,0 +1,7 @@
+<div tal:omit-tag=""
+     tal:define="name name|field.name;
+                 vmodel vmodel|'field_model_' + name;">
+  <tailbone-timepicker name="${name}"
+                       v-model="${vmodel}">
+  </tailbone-timepicker>
+</div>