Add date picker using webshim

jm2l/forms.py

@@ -60,7 +60,7 @@ class StaffTasks(MyBaseForm):
     name     = TextField(u'Nom de la tâche', [validators.Required()])
     area_uid = SelectField(u'Pôle concerné', coerce=int )
     closed_by = SelectField(u'Assigné à', coerce=int )
-    due_date = DateField(u'Date prévue', format='%d/%m/%Y')
+    due_date = DateField(u'Date prévue', format='%Y-%m-%d')
     description = TextAreaField('Description', [validators.optional(), validators.Length(max=1000000)],
         filters=[strip_filter])
 

jm2l/static/css/jm2l.css

@@ -143,3 +143,13 @@ a {
   text-align: right;
   display: inline-block;
 }
+
+/* Fix calendar button vertical pos */
+.date-input-buttons {
+  margin-bottom: 0.7em;
+}
+
+/* Calendar button looks better without that gray background */
+.ws-popover-opener {
+  background: none;
+}

jm2l/templates/Staff/tasks.mako

@@ -5,6 +5,21 @@
   <script src="/js/jm2l.js"></script>
   <script src="/vendor/ckeditor/ckeditor.js"></script>
   <script src="/vendor/select2/js/select2.js"></script>  
+
+  <script src="//cdn.jsdelivr.net/webshim/1.15.7/polyfiller.js"></script>
+  <script type="text/javascript">
+    webshim.setOptions('forms-ext', {
+      replaceUI: 'auto',
+      types: 'date',
+      date: {
+        startView: 2,
+        classes: 'hide-spinbtns',
+      }
+    });
+
+    //start polyfilling
+    webshim.polyfill('forms-ext');
+  </script>
 </%def>
 <%def name="cssAddOn()">
   <link rel="stylesheet" href="/vendor/fileupload/css/jquery.fileupload.css">

jm2l/templates/helpers.mako

@@ -39,12 +39,12 @@ TabJs = {'select':[], 'desc':[]}
                 <%
                 PlaceHolder = DicFormat[Field.name].get("PlaceHolder")
                 FieldStyle = DicFormat[Field.name].get("FieldStyle")
-                Class = [None,"ckeditor"][ DicFormat[Field.name].has_key("ckeditor") ]
+                Class = [False,"ckeditor"][ "ckeditor" in DicFormat[Field.name] ]
                 %>
-                % if PlaceHolder:
+                % if Field.type == "DateField":
-                    ${Field(placeholder=PlaceHolder, style=FieldStyle, class_=Class)}
+                    ${Field(placeholder=PlaceHolder or False, style=FieldStyle, class_=Class, type = "date")}
                 % else:
-                    ${Field(style=FieldStyle, class_=Class)}
+                    ${Field(placeholder=PlaceHolder or False, style=FieldStyle, class_=Class)}
                 % endif
             % else:
                 ${Field()}

jm2l/views.py

@@ -294,6 +294,7 @@ def tasks(request):
                 .order_by('nom').all()
     form.closed_by.choices = [(u.uid, "%s %s" % (u.nom, u.prenom)) 
         for u in Users]
+    form.due_date.type = "date"
     if request.method == 'POST' and form.validate():
         form.populate_obj(Task)
         Task.closed = False