Fixed #321. Time picker works now

flask_admin/form/fields.py

@@ -15,9 +15,10 @@ class TimeField(fields.Field):
         A text field which stores a `datetime.time` object.
         Accepts time string in multiple formats: 20:10, 20:10:00, 10:00 am, 9:30pm, etc.
     """
-    widget = widgets.TextInput()
+    widget = admin_widgets.TimePickerWidget()
 
-    def __init__(self, label=None, validators=None, formats=None, **kwargs):
+    def __init__(self, label=None, validators=None, formats=None,
+                 default_format=None, widget_format=None, **kwargs):
         """
             Constructor
 
@@ -27,6 +28,10 @@ class TimeField(fields.Field):
                 Field validators
             :param formats:
                 Supported time formats, as a enumerable.
+            :param default_format:
+                Default time format. Defaults to '%H:%M:%S'
+            :param widget_format:
+                Widget date format. Defaults to 'hh:ii:ss'
             :param kwargs:
                 Any additional parameters
         """
@@ -36,11 +41,14 @@ class TimeField(fields.Field):
                                    '%I:%M:%S%p', '%I:%M%p',
                                    '%I:%M:%S %p', '%I:%M %p')
 
+        self.default_format = default_format or '%H:%M:%S'
+        self.widget_format = widget_format or 'hh:ii:ss'
+
     def _value(self):
         if self.raw_data:
             return u' '.join(self.raw_data)
         else:
-            return self.data and self.data.strftime(self.format) or u''
+            return self.data and self.data.strftime(self.default_format) or u''
 
     def process_formdata(self, valuelist):
         if valuelist:

flask_admin/form/widgets.py

@@ -64,6 +64,19 @@ class DateTimePickerWidget(widgets.TextInput):
         return super(DateTimePickerWidget, self).__call__(field, **kwargs)
 
 
+class TimePickerWidget(widgets.TextInput):
+    """
+        Date picker widget.
+
+        You must include bootstrap-datepicker.js and form.js for styling to work.
+    """
+    def __call__(self, field, **kwargs):
+        kwargs['data-role'] = u'timepicker'
+        kwargs['data-date-format'] = field.widget_format or 'hh:ii:ss'
+        kwargs['data-date-autoclose'] = u'true'
+        return super(TimePickerWidget, self).__call__(field, **kwargs)
+
+
 class RenderTemplateWidget(object):
     """
         WTForms widget that renders Jinja2 template

flask_admin/static/admin/js/form.js

@@ -106,11 +106,20 @@
                 processAjaxWidget($el, name);
                 return true;
             case 'datepicker':
-                $el.datetimepicker({minView: 'month'});
+                $el.datetimepicker({
+                  minView: 'month'
+                });
                 return true;
             case 'datetimepicker':
                 $el.datetimepicker();
                 return true;
+            case 'timepicker':
+                $el.datetimepicker({
+                  startView: 'day',
+                  maxView: 'day',
+                  formatViewType: 'time'
+                });
+                return true;
         }
       };
 

flask_admin/static/datetimepicker/bootstrap-datetimepicker.js

@@ -481,6 +481,7 @@
 			if (this.date == null || this.viewDate == null) {
 				return;
 			}
+
 			var d = new Date(this.viewDate),
 				year = d.getUTCFullYear(),
 				month = d.getUTCMonth(),
@@ -493,8 +494,10 @@
 				endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity,
 				currentDate = (new UTCDate(this.date.getUTCFullYear(), this.date.getUTCMonth(), this.date.getUTCDate())).valueOf(),
 				today = new Date();
-			this.picker.find('.datetimepicker-days thead th:eq(1)')
+
+				this.picker.find('.datetimepicker-days thead th:eq(1)')
 						.text(dates[this.language].months[month]+' '+year);
+
 				if (this.formatViewType == "time") {
 						var hourConverted = hours % 12 ? hours % 12 : 12;
 						var hoursDisplay = (hourConverted < 10 ? '0' : '') + hourConverted;
@@ -510,6 +513,7 @@
 						this.picker.find('.datetimepicker-minutes thead th:eq(1)')
 								.text(dayMonth + ' ' + dates[this.language].months[month] + ' ' + year);
 				}
+
 				this.picker.find('tfoot th.today')
 						.text(dates[this.language].today)
 						.toggle(this.todayBtn !== false);

flask_admin/templates/admin/model/list.html

@@ -6,7 +6,7 @@
 {% block head %}
     {{ super() }}
     <link href="{{ url_for('admin.static', filename='select2/select2.css') }}" rel="stylesheet">
-    <link href="{{ url_for('admin.static', filename='datepicker/bootstrap-datepicker.css') }}" rel="stylesheet">
+    <link href="{{ url_for('admin.static', filename='datetimepicker/bootstrap-datetimepicker.css') }}" rel="stylesheet">
 {% endblock %}
 
 {% block body %}
@@ -139,7 +139,7 @@
 
 {% block tail %}
     {{ super() }}
-    <script src="{{ url_for('admin.static', filename='datepicker/bootstrap-datepicker.js') }}"></script>
+    <script src="{{ url_for('admin.static', filename='datetimepicker/bootstrap-datetimepicker.js') }}"></script>
     <script src="{{ url_for('admin.static', filename='admin/js/form.js') }}"></script>
     <script src="{{ url_for('admin.static', filename='admin/js/filters.js') }}"></script>