sort of improve start time input using datetimepicker

TODO.md

@@ -1,8 +1,8 @@
+* wth does the datetimepicker not style the current date?
+  * and why is the time not aligned to the time controls?
 * separate dirs for source and downloads
 * fix failing downloads (X-Sendfile?)
 * remove download after download
-* bootstrap styling
-  * use wtforms to render form?
 * no seconds in the form
 
 later

prolefeeder.py

@@ -20,7 +20,7 @@ Bootstrap(app)
 
 
 class DownloadForm(FlaskForm):
-    start_time = DateTimeField('Start time', validators=[DataRequired()])
+    start_time = DateTimeField('Start time', validators=[DataRequired()], id='start_time')
     length = DecimalField('Length', validators=[DataRequired(),
                                                 NumberRange(min=1, max=app.config['MAX_LENGTH'])])
     submit = SubmitField('Download')

templates/download.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% import "bootstrap/wtf.html" as wtf %}
 
 
 {% block head %}
@@ -6,26 +7,31 @@
     {% if filename is defined %}
     <meta http-equiv="refresh" content="0;URL='download_file/{{ filename }}'" />
     {% endif %}
+    <link type="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
 {% endblock %}
 
 {% block app_content %}
     <h1>Download</h1>
-    <form action="" method="post" novalidate>
-        {{ form.hidden_tag() }}
-        <p>
-            {{ form.start_time.label }}<br>
-            {{ form.start_time() }}<br>
-            {% for error in form.start_time.errors %}
-            <span style="color: red;">[{{ error }}]</span>
-            {% endfor %}
-        </p>
-        <p>
-            {{ form.length.label }}<br>
-            {{ form.length() }}<br>
-            {% for error in form.length.errors %}
-            <span style="color: red;">[{{ error }}]</span>
-            {% endfor %}
-        </p>
-        <p>{{ form.submit() }}</p>
-    </form>
+
+    <div class="row">
+        <div class='col-sm-6'>
+            {{ wtf.quick_form(form, button_map={'submit': 'primary'}) }}
+        </div>
+    </div>
+{% endblock %}
+
+{% block scripts %}
+{{ super() }}
+
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
+
+<script type="text/javascript">
+    $(function () {
+        $('#start_time').datetimepicker({
+            format:'YYYY-MM-DD HH:mm:ss',
+            sideBySide: true
+        });
+    });
+</script>
 {% endblock %}